Обратный отсчет доступных пространств в текстовой области с помощью jquery или других?
Каждая программа Java начинается с
public static void main(String[] args) {
. Этот массив типа String, который принимает main() в качестве параметра, содержит аргументы командной строки для вашей программы. Если пользователь запускает вашу программу как
$ java myProgram a
, тогда args[0] будет удерживать строку «a».
5 ответов
Очень просто в jQuery:
<textarea id="myTextarea"></textarea>
<p id="counter"></p>
<script type="text/javascript">
$('#myTextarea').keyup(function () {
var left = 200 - $(this).val().length;
if (left < 0) {
left = 0;
}
$('#counter').text('Characters left: ' + left);
});
</script>
Замените 200 любым вашим пределом.
Обратите внимание, что это не ограничивает фактический текст ввод, он просто ведет обратный отсчет. Вам нужно проверить на стороне сервера длину ввода, это просто визуальный помощник.
Кстати, я не думаю, что вам даже следует пытаться ограничивать длину ввода, запрещая любой ввод при достижении предела. С точки зрения удобства использования это проблема, и на нее в любом случае нельзя положиться. Простой обратный отсчет и проверка на стороне сервера - лучший вариант IMHO.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('#TestId').keyup(function(e)
{
var maxLength = 100;
var textlength = this.value.length;
if (textlength >= maxLength)
{
$('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
this.value = this.value.substring(0, maxLength);
e.preventDefault();
}
else
{
$('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
}
});
});
</script>
</head>
<body>
<textarea id="TestId" cols="20" rows="8"></textarea><br />
(Maximum characters: 100)<br />
<span id="charStatus"></span>
</body>
</html>
Использование jQuery при условии, что у вас есть текстовое поле с идентификатором , поле , которое вы хотите ограничить до 100 символов, и другой элемент с идентификатором оставшиеся символы ] для отображения количества доступных символов:
var max = 100;
$('#field').keyup(function() {
if($(this).val().length > max) {
$(this).val($(this).val().substr(0, max));
}
$('#chars-remaining').html((max - $(this).val().length) + ' characters remaining');
});
I used jQuery and the answer by deceze and then tweaked it to give me a twitter-style countdown so that users could see by how much they had gone over and adjust their text accordingly. I also put it into its own function so I could call it from another function that sometimes populated the textarea automatically:
function reCalcToText() {
var left = 200 - $('.toText').val().length;
if (left < 0) {
$('#counter').text(left);
$('#counter').addClass("excess");
} else {
$('#counter').text(left);
$('#counter').removeClass();
}
}
function onReady() {
$('#<%= toText.ClientID %>').keyup(function() {
reCalcToText();
});
};
Я использовал просто считающий jQuery плагин Аарона Рассела с успехом
Простое использование:
$('#my_textarea').simplyCountable();
Расширенное использование:
$('#my_textarea').simplyCountable({
counter: '#counter',
countable: 'characters',
maxCount: 140,
strictMax: false,
countDirection: 'down',
safeClass: 'safe',
overClass: 'over',
thousandSeparator: ','
});