| |
|
|
| | Для подсчета количества введенных в форму знаков используется приведенный ниже код. Здесь админ видит количество введенных знаков, а когда до максимального значения остается десять, то меняется цвет сообщеия на красный (см. http://wowa55.pz9.ru/5.php).
В принципе, все работает нормально.
Однако, есть две проблемы.
1. Как организовать ввод при наличии двух и более textarea ( что бы показывать оператору количество оставшихся знаков отдельно по каждому из них )?
2. Как сделать цвет предупреждающего сообщения по умолчанию зеленым (сохранив красный цвет, когда до предела осталось десять и менее знаков)?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Панель настройки</title>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<STYLE type=text/css>
.warning {
color: red;
}
#textareaFeedback {
text-align: center;
}
</STYLE>
<SCRIPT>
$(function()
{
var maxLength = $('#textarea').attr('maxlength');
$('#textarea').keyup(function()
{
var curLength = $('#textarea').val().length;
$(this).val($(this).val().substr(0, maxLength));
var remaning = maxLength - curLength;
if (remaning < 0) remaning = 0;
$('#textareaFeedback').html(remaning + ' осталось символов');
if (remaning < 10) // когда менять цвет
{
$('#textareaFeedback').addClass('warning')
}
else
{
$('#textareaFeedback').removeClass('warning')
}
})
})
</SCRIPT>
</head>
<body bgcolor="#FFFFFF">
<form method="POST" >
<P><TEXTAREA id=textarea rows=5 cols=25 maxlength="25"></TEXTAREA>
<DIV id=textareaFeedback></DIV><P></P>
<input type="submit" value="Далее" name="B2">
</form>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(30.10.2013 в 02:06)
| | | Так #textarea лучше не поступать, не обязательно, но вполне возможна ситуация, когда возникнет ошибка, в которой придется потом разбираться. Textarea - это уже объект, и этого достаточно чтобы перехватывать его события и обрабатывать их. В обработчике тем более нет нужды использовать id объекта, чтобы обратиться к нему, в jOuery в обработчике события уже готова ссылка на объект источник - this.
А задать значение по умолчанию и сохранять текущее состояние объекта можно в его объекте .data().
<script>
$(function() {
$('textarea').keyup(function() {
//проверяем были ли нажатия у этого объекта, и если да, то извлекает их число
var set = !$(tis).isEmptyObject('len') ? $(tis).isEmptyObject('len') : 0,
max = this.maxlength, //максимально возможная длина
len = this.value.length; //текущая длина
//производим операции необходимые и сохраняем текущее состояние
$(tis).data('len', len);
//хотя проверку достигнуто ли максимальное значение лучше проверять в момент нажатия
}).keypress(function() {
//здесь лучше проверять достижение максимального значения, и выход если достигнуто
//с отображением этого значение, а в обработчике keyup заносить новое значение
});
});
</script>
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(30.10.2013 в 09:39)
| | | Более корректная функция - это хорошо. Но вопросы, породившие тему, остались нераскрытыми... | |
| |
|
|
| |
|
|
| |
для: Владимир55
(30.10.2013 в 11:20)
| | | Да нормально confirm объяснил. Правда, как всегда, оставил пищу для ума - фирменную недосказанность.
Если никто не объяснит "на пальцах", приду с работы - наваяю примерный код. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(30.10.2013 в 11:20)
| | | 1. Как организовать ввод при наличии двух и более textarea ( что бы показывать оператору количество оставшихся знаков отдельно по каждому из них )?
Я ответил на этот вопрос:
Как организовать ввод при наличии двух и более textarea - назначать обработчик событий не по ID, а по тегу элемента
что бы показывать оператору количество оставшихся знаков отдельно по каждому из них - хранить текущую длину в объекте .data() у textarea
2. Как сделать цвет предупреждающего сообщения по умолчанию зеленым (сохранив красный цвет, когда до предела осталось десять и менее знаков)?
И об этом говорил - хранить все текущие состояния объекта в .data(), то есть записываете в этот объект и длину значения и цвет - data({len:200, cls:65280}) - где свойство len, это длина значения, а cls, это десятичное значение цвета. Значение цвета по умолчанию (зеленый = 65280 = 0xFF00) и длину значения равную 0 можно записать при загрузке страницы в объекты data() всех textarea, и затем работать с этими объектами, без проверки установки их у объектов (isEmptyObject()).
По событию keypress проверяете не достигнуто ли максимальное значение, если да, то инвертируете цвет в красный cls ^= 16776960, и записываете это значение свойству cls. Преобразовываете инвертированное значение cls в RGB составляющие:
function toRGB(v) {
return 'rgb('+(parseInt(v/65536)%256)+','+(parseInt(v/256)%256)+','+(v%256)+')';
}
|
и полученное значение указываете css свойству textarea:
$(this).css({borderColor:toRGB(cls)})
|
В событие keyup проверяете и инвертируете это значение опять на зеленый цвет cls ^= 16776960, получаете RGB значение и применяете css свойству. Вот и весь механизм, так как событие keyup не позволит ничего делать, если проверку производить в keypress, и значит все будут работать как триггер.
Что еще объяснять? | |
| |
|
|
|
| |
|
|
| |
для: Deed
(30.10.2013 в 18:26)
| | | Deed, СУПЕР!
Работает превосходно!
Причем, даже в том случае, если три поля находятся в одной форме form!
(Остается только удивляться, как строка сообщений понимает, на какое окно ей реагировать...).
Спасибо!
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<SCRIPT>
function checklength(t){
var ml = $(t).attr('maxlength');
var diff = ml - $(t).val().length;
var ad = $(t).nextAll('div:first');
if (diff==ml){
ad.html(' ').css('color','green');
}
else if(diff>10){
ad.text('Осталось знаков: '+diff).css('color','green');
}
else{
ad.text('Осталось знаков: '+diff+'!').css('color','red');
}
}
</SCRIPT>
</head>
<body>
<form method="post">
<textarea rows="5" cols="25" maxlength="25" onkeyup="checklength(this);"></textarea>
<br><div class="textareaFeedback"> </div>
<!-- - для того, чтобы содержимое страницы "не прыгало" при появлении текста в div -->
<br><br>
<textarea rows="5" cols="25" maxlength="30" onkeyup="checklength(this);"></textarea>
<br><div class="textareaFeedback"> </div>
<br><br>
<textarea rows="5" cols="25" maxlength="20" onkeyup="checklength(this);"></textarea>
<br><div class="textareaFeedback"> </div>
<input type="submit" value="Далее" >
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(30.10.2013 в 20:32)
| | | А что там удивляться?
var ad = $(t).nextAll('div:first');
|
То есть, из всех, следующих за данной "текстареей" элементов, выбрать первый div. | |
| |
|
|
| |
|
|
| |
для: Deed
(30.10.2013 в 20:41)
| | | Понятно.
Ещё раз спасибо! | |
| |
|
|
