Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2012, 11:19
Новичок на форуме
Отправить личное сообщение для NetBuilder Посмотреть профиль Найти все сообщения от NetBuilder
 
Регистрация: 10.01.2012
Сообщений: 1

Визуальное ограничение ввода текста
Как сделать чтоб после 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;
}

Последний раз редактировалось NetBuilder, 10.01.2012 в 11:30.
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2012, 11:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

Сообщение от 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>

Последний раз редактировалось ksa, 10.01.2012 в 11:35.
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2012, 16:48
Аватар для GuardCat
Просто любитель
Отправить личное сообщение для GuardCat Посмотреть профиль Найти все сообщения от GuardCat
 
Регистрация: 13.09.2011
Сообщений: 300

А вот без 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, однако и у вас и у меня код обладает побочным эффектом: курсор скачет в начало строки. Ничего ввести нельзя нормально. У вас постоянно скачет, а у меня с момента переполнения.

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

Последний раз редактировалось GuardCat, 10.01.2012 в 17:20.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ограничение ввода с помощью блока submit Pavel.zol Events/DOM/Window 9 14.12.2011 23:42
Контроль ввода текста в форму Derack Events/DOM/Window 11 09.01.2011 01:07
Выпадающий список с возможностью ввода текста LA_ Элементы интерфейса 6 27.10.2010 16:30
Ограничение символов для ввода kotofeich Элементы интерфейса 9 04.06.2010 17:01
Форма для ввода текста с расширенными функциями 0x22b Элементы интерфейса 0 01.09.2008 10:38