Подсчет количества введенных в форму знаков при наличии двух textarea

@vlad-55 · Регистрация: 21.02.2009

Студворк — интернет-сервис помощи студентам

Для подсчета количества введенных в форму знаков используется приведенный ниже код. Здесь админ видит количество введенных знаков, а когда до максимального значения остается десять, то меняется цвет сообщеия на красный (см. http://wowa55.pz9.ru/5.php).

В принципе, все работает нормально.

Однако, есть две проблемы.
1. Как организовать ввод при наличии двух и более textarea ( что бы показывать оператору количество оставшихся знаков отдельно по каждому из них )?
2. Как сделать цвет предупреждающего сообщения по умолчанию зеленым (сохранив красный цвет, когда до предела осталось десять и менее знаков)?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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>

@вандал · 30.10.2013, 12:33

Не проверял, но попробуйте так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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> 
.textarea
.warning { 
    color: red; 
} 
 
.textareaFeedback { 
    color: green;
    text-align: center; 
} 
 
</STYLE> 
 
 
 
<SCRIPT> 
$(function() 
 {
     $('.textarea').keyup(function() 
     { 
         maxLength = $(this).attr('maxlength'); 
         text = '#' + $('.textarea').attr("id");
         feed = text.replace("text", "f");
         var curLength = $(text).val().length; 
         $(this).val($(this).val().substr(0, maxLength)); 
         var remaning = maxLength - curLength; 
         if (remaning < 0) remaning = 0; 
         $(this).html(remaning + ' осталось символов'); 
         if (remaning < 10) // когда менять цвет 
         { 
             $(feed).addClass('warning') 
         } 
         else 
         { 
             $(feed).removeClass('warning') 
         } 
     }) 
 }) 
</SCRIPT> 
 
 
 
</head> 
 
<body bgcolor="#FFFFFF"> 
 
<form method="POST" > 
<P><TEXTAREA class="textarea" id="text1" rows="5" cols="25" maxlength="25"></TEXTAREA> 
 
<DIV class="textareaFeedback" id="f1"></DIV><P></P>
 
<P><TEXTAREA class="textarea" id="text2" rows="5" cols="25" maxlength="25"></TEXTAREA> 
 
<DIV class="textareaFeedback" id="f2"></DIV><P></P> 
<input type="submit" value="Далее" name="B2"> 
</form>

Если будут ошибки пишите

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом