Форум

NetBuilder · #1 (**permalink**) 10.01.2012, 11:19

Как сделать чтоб после 70 символа текст был зачеркнутым и серым.
Пока так:

<div  id="schet" >0</div>
<div contentEditable="true" id="NewTextarea"></div>

<script>
$(document).ready(function()
{
$("#NewTextarea").keyup(function()
{
var count= $("#NewTextarea").text().length;
$("#schet").text(count);
if (count>70)
{
$("#schet").text("> 70");	
if (count == 71)
{
	var x = $("#NewTextarea").text();
	$("#NewTextarea").text("")
	$("#NewTextarea").prepend(x +"<del>. \r</del>");
}
}
});
});
</script>

#NewTextarea
{
	background-color:#FFFFFF;
	width: 200px;
	height: 150px;
	max-height: 150px;
	max-width: 200px;
	border-color: #06C; 
	border-style: outset; 
	border-width: thin; 
	text-align: left;
	overflow-y: scroll;
	
}
#NewTextarea del
{
	color:#666666;
}

ksa · #2 (**permalink**) 10.01.2012, 11:33

Сообщение от NetBuilder

Как сделать чтоб после 70 символа текст был зачеркнутым и серым.

70 много... Как вариант для 10-ти.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
del {
   color: silver;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
	$("#NewTextarea").keyup(function(){
		var val,str=$("#NewTextarea").text();
		val=(str.length>10)? '> 10': str.length;
		$("#schet").text(val);
		val=str.substring(0,10);
		val+='<del>'+str.substring(10)+'</del>';
		$("#NewTextarea").html(val);
	});
});
</script>
</script>
</head>
<body>
<div  id="schet" >0</div>
<div contentEditable="true" id="NewTextarea"></div>
</body>
</html>

GuardCat · #3 (**permalink**) 10.01.2012, 16:48

А вот без JQuery.

<!doctype html>
<html>
	<head>
		<style type = "text/css">
			.exceed {
				color: gray;
				text-decoration: line-through;
			}
			div.textbox {
				background-color: #eee;
			}
		</style>
	</head>
<body>
	<div id = "textbox" class = "textbox" contenteditable></div>
	<script>
		(function (div, maxLength) {
				var span = document.createElement("span"), text;
				span.className = "exceed";
				span.contentEditable = true;
				div.onkeyup = function () {
					if (div.innerText.length + span.innerText.length> maxLength) {
						text = div.innerText
						div.innerHTML = text.substr(0, maxLength);
						span.innerText = text.substr(maxLength);
						div.appendChild(span);
					} else {
						div.innerText +=  span.innerText;
						span.innerText = "";
					}
				}
			})(document.getElementById("textbox"), 5)
	</script>
</body>
</html>

На кроссбраузерность не проверял (работет в Chrome).
ksa, однако и у вас и у меня код обладает побочным эффектом: курсор скачет в начало строки. Ничего ввести нельзя нормально. У вас постоянно скачет, а у меня с момента переполнения.

В связи с этим хотелось бы поднять вот этот пост.

Форум

Справочник

Discord чат

Курсы javascript