Визуальное ограничение ввода текста
Как сделать чтоб после 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;
}
|
Цитата:
<!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>
|
А вот без 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, однако и у вас и у меня код обладает побочным эффектом: курсор скачет в начало строки. Ничего ввести нельзя нормально. У вас постоянно скачет, а у меня с момента переполнения. В связи с этим хотелось бы поднять вот этот пост. |
| Часовой пояс GMT +3, время: 01:15. |