Сколько осталось символов до максимума в textarea

illya05 · Регистрация: 03.08.2013

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

Создал так сказать "Chars left" - сколько осталось символов до максимума в textarea и т.п.

Тау работает:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form action="" name="generate_qr_text" method="POST" onsubmit="return validate_qr_text();">
    <input name="invite" type="hidden" value="'.$_POST['code'].'">
    <p class="name">Text:<span class="red">*</span><span class="red" id="inc_012" style="display:none;font-style:oblique;font-weight:bold;"> <-- Text can not be empty!</span></p>
    <input id="qr_text" name="text" type="text" size="90" maxlength="80" class="input"><span style="font-weight:bold;">Chars left: </span><span id="charsLeft_text" style="font-weight:bold;"></span>
    '.$var_html.'
    <input type="submit" value="Create!" name="bgenerate_qr_text">
</form>
<script type="text/javascript"> 
    $(document).ready(function(){               
    $(\'#qr_text\').limit(\'80\',\'#charsLeft_text\');
    }); 
</script>

А тоже самое вот тут - нет!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form name="email_form" method="POST" onsubmit="return validate_email_form();">
    <p class="name">From:<span class="red">*</span><span class="red" id="inc_006" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the E-mail it will be send from!</span></p>
    <input name="from" type="text" maxlength="50" class="input" style="width:200;">
    <p class="name">To:<span class="red">*</span><span class="red" id="inc_007" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the valid E-mail!</span></p>
    <input name="to" type="text" maxlength="50" class="input" style="width:200;">
    <p class="name">Subject:</p>
    <input name="subject" type="text" maxlength="50" class="input" style="width:200;">
    <p class="name">Text:</p>
    <textarea name="text" class="mail_textarea" style="width:700px;height:240px;"></textarea>
    <div class="float" style="width:500px;max-width:500px;height:45px;">
         <p style="font-weight:bold;">Chars left: </span><span id="charsLeft" style="font-weight:bold;"></p>
         <p>'.help_gen().'<span class="red">*</span><span class="red" id="inc_008" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the correct answer!</span></p>
     </div>
     <input type="submit" name="send_free" value="Send!" class="mail_button_free" style="margin-top:5px;">
     <div class="clear"></div>
</form>
<script type="text/javascript"> 
      $(document).ready(function(){             
      $(\'textarea\').limit(\'500\',\'#charsLeft\');
      });   
</script>

В чем косяк - то?

@xenohunter · 31.08.2014, 00:37

illya05, какую ошибку выдаёт? И можно ссылку на плагин? Либо код, если сами написали limit.

illya05 · 31.08.2014, 00:50 **[ТС]**

xenohunter, Ошибки нет, просто скрипт не считает кол-во знаков в полях (хотя на других страницах все работает)

Плагин:

JavaScript
1
(function($){$.fn.extend({limit:function(limit,element){var interval,f;var self=$(this);$(this).focus(function(){interval=window.setInterval(substring,100)});$(this).blur(function(){clearInterval(interval);substring()});substringFunction="function substring(){ var val = $(self).val();var length = val.length;if(length > limit){$(self).val($(self).val().substring(0,limit));}";if(typeof element!='undefined')substringFunction+="if($(element).html() != limit-length){$(element).html((limit-length<=0)?'0':limit-length);}";substringFunction+="}";eval(substringFunction);substring()}})})(jQuery);

@xenohunter · 31.08.2014, 14:04

illya05, вам очень срочно? Если нет, то могу вечерком написать нормальный плагин. Кстати, не работать может из-за отсутствия поддержки textarea.

Не по теме:

Не знаю, кто писал это чудо, но... eval()! Там используется eval()!!!
И зачем-то огород с focus и blur вместо простого подвешивания на onkeyup проверки текущей длины.

illya05 · 31.08.2014, 14:24 **[ТС]**

xenohunter, Мне не срочно, сайт в разработке - времени вагон и маленькая тележка ))

Буду очень благодарен!

@xenohunter · 01.09.2014, 02:26

illya05, держите. Если что, можете там цвет менять, в зависимости от значения. Или ещё что-то.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function ($) {
 
    $.fn.limit = function (elem, limit) {
 
        var target = this,
            display = $(elem);
 
        target.on('focus keyup', function () {
            var len = target.val().length;
            display.text(limit - len);
        });
 
    };
 
}(jQuery));

illya05 · 01.09.2014, 08:14 **[ТС]**

xenohunter, Огромное спасибо! Только как ее вызвать?)

@xenohunter · 01.09.2014, 09:53

illya05, почти так же, как и вашу версию, только аргументы я местами поменял:

JavaScript
1
2
3
$(document).ready(function () {             
    $("textarea").limit("#charsLeft", 500); // и число не строкой
});

illya05 · 01.09.2014, 16:40 **[ТС]**

xenohunter, Не выводит:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form name="email_form" method="POST" onsubmit="return validate_email_form();">
                                    <input name="invite" type="hidden" value="'.$_POST['code'].'">
                                    <p class="name">From:<span class="red">*</span><span class="red" id="inc_006" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the E-mail it will be send from!</span></p>
                                    <input name="from" type="text" maxlength="50" class="input" style="width:200;">
                                    <p class="name">To:<span class="red">*</span><span class="red" id="inc_007" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the valid E-mail!</span></p>
                                    <input name="to" type="text" maxlength="50" class="input" style="width:200;">
                                    <p class="name">Subject:</p>
                                    <input name="subject" type="text" maxlength="255" class="input" style="width:200;">
                                    <p class="name">Text:</p>
                                    <textarea name="text" class="mail_textarea" style="width:700px;height:240px;"></textarea>
                                    <div class="float" style="width:500px;max-width:500px;height:45px;">
                                        <p style="font-weight:bold;">Chars left: </span><span id="charsLeft" style="font-weight:bold;"></p>
                                        <p>'.help_gen().'<span class="red">*</span><span class="red" id="inc_008" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the correct answer!</span></p>
                                    </div>
                                    <input type="submit" name="send" value="Send!" class="mail_button_free" style="margin-top:5px;">
                                    <div class="clear"></div>
                                </form>
                                <script type="text/javascript">
                                    $(document).ready(function () {             
                                    $("textarea").limit("#charsLeft", 500); // и число не строкой
                                    });
                                </script>

...

@xenohunter · 01.09.2014, 18:52

illya05, попробуйте через id подключить, может быть, у вас ещё textarea на странице есть.

illya05 · 01.09.2014, 18:59 **[ТС]**

xenohunter, Не хочет

@xenohunter · 01.09.2014, 21:54

illya05, у вас в 12 строке закрывающий тег span до открывающего стоит. Хотя, у меня работает даже с неправильным тегом. Вы jQuery и скрипт, который я дал, не забыли подключить?

illya05 · 01.09.2014, 23:54 **[ТС]**

xenohunter, Подключил

HTML5
1
2
<script type="text/javascript" src="{base_url}/app/tpl/script/jquery.js"></script>
<script type="text/javascript" src="{base_url}/app/tpl/script/text.js"></script>

Text.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//(function($){$.fn.extend({limit:function(limit,element){var interval,f;var self=$(this);$(this).focus(function(){interval=window.setInterval(substring,100)});$(this).blur(function(){clearInterval(interval);substring()});substringFunction="function substring(){ var val = $(self).val();var length = val.length;if(length > limit){$(self).val($(self).val().substring(0,limit));}";if(typeof element!='undefined')substringFunction+="if($(element).html() != limit-length){$(element).html((limit-length<=0)?'0':limit-length);}";substringFunction+="}";eval(substringFunction);substring()}})})(jQuery);
(function ($) {
 
    $.fn.limit = function (elem, limit) {
 
        var target = this,
            display = $(elem);
 
        target.on('focus keyup', function () {
            var len = target.val().length;
            display.text(limit - len);
        });
 
    };
 
}(jQuery));

Форма:

PHP
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
if(!$_GET['submit'] == 'yes'){
                    $content .= '
                        <div id="mail_block" class="center_mainpage">
                            <p class="name">For contact us please use the form below! | <a href="{base_url}" class="about"> Home</a></p>
                            <noscript><p class="red">Please, enable javaScript for correct work!</p></noscript>
                            <p class="gray_line"></p>
                            <form action="" name="contact_form" method="POST" onsubmit="return validate_form();">
                                <p class="name">Name:</p>
                                <input name="name" type="text" size="25" maxlength="12" class="input">
                                <p>&nbsp;</p>
                                <p class="name">E-mail:</p>
                                <input name="email" type="text" size="25" maxlength="30" class="input">
                                <p>&nbsp;</p>
                                <p class="name">Report:<span class="red">*</span><span class="red" id="inc_002" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the report!</span></p>
                                <textarea name="content" cols="100" rows="10" class="textarea float"></textarea>
                                <input type="submit" value="Send!" name="feedback" class="button float">
                                <div class="clear">
                            </form><span style="font-weight:bold;">Chars left: </span><span id="charsLeft" style="font-weight:bold;"></span>
                            <span style="margin-left:20px;">'.help_gen().'<span class="red">*</span><span class="red" id="inc_001" style="display:none;font-style:oblique;font-weight:bold;"> <-- Type the correct answer!</span></span>
                                
                            <script type="text/javascript"> 
                                $(document).ready(function () {             
                                $(".textarea").limit("#charsLeft", 500); // и число не строкой
                                }); 
                            </script> 
                        </div>
                    ';
                }

@xenohunter · 02.09.2014, 02:03

illya05, копирую ваш HTML-код, всё работает. Вы пробовали написать что-то в textarea? Может быть, только при загрузке страницы не отображается, а при фокусе на этом поле появляется? В любом случае, сделал так, чтобы и при запуске количество символов отображалось:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function ($) {
 
    $.fn.limit = function (elem, limit) {
 
        var target = this,
            display = $(elem);
 
        target.on('focus keyup setlimit', function () {
            var len = target.val().length;
            display.text(limit - len);
        }).trigger('setlimit');
 
    };
 
}(jQuery));

illya05 · 02.09.2014, 16:50 **[ТС]**

Не работает(( Напишите полностью Ваш код, пожалуйста. Может у Вас другая версия JQuery?

@xenohunter · 02.09.2014, 21:48

illya05, если у вас не ниже 1.7, то должно работать. У меня 2.1.1, но это не принципиально. Я этот скрипт в консоли написал, когда Яндекс открыт был, там 1.8.3. Так я ваш код скопировал, вставил его в body на пустой странице с подключёнными jQuery и своим скриптом, и всё заработало.

illya05 · 02.09.2014, 23:42 **[ТС]**

xenohunter, Странно...

Добавлено через 33 минуты
Все! Просто NetBeans не тот проект редактировал... А в том скрипте я просто не подключил 1 библиотеку (maskedinput.js). Ваш скрипт тоже работает, Спасибо!

@xenohunter · 03.09.2014, 00:05

illya05, да, бывает иногда. Рад, что у вас всё получилось!

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	31.08.2014, 00:37
	illya05, какую ошибку выдаёт? И можно ссылку на плагин? Либо код, если сами написали limit. 1

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	31.08.2014, 14:04
	illya05, вам очень срочно? Если нет, то могу вечерком написать нормальный плагин. Кстати, не работать может из-за отсутствия поддержки textarea. Не по теме: Не знаю, кто писал это чудо, но... eval()! Там используется eval()!!! И зачем-то огород с focus и blur вместо простого подвешивания на onkeyup проверки текущей длины. 1

illya05 140 / 96 / 47 Регистрация: 03.08.2013 Сообщений: 765
	31.08.2014, 14:24 [ТС]
	xenohunter, Мне не срочно, сайт в разработке - времени вагон и маленькая тележка )) Буду очень благодарен! 0

illya05 140 / 96 / 47 Регистрация: 03.08.2013 Сообщений: 765
	01.09.2014, 08:14 [ТС]
	xenohunter, Огромное спасибо! Только как ее вызвать?) 0

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	01.09.2014, 18:52
	illya05, попробуйте через id подключить, может быть, у вас ещё textarea на странице есть. 0

illya05 140 / 96 / 47 Регистрация: 03.08.2013 Сообщений: 765
	01.09.2014, 18:59 [ТС]
	xenohunter, Не хочет 0

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	01.09.2014, 21:54
	illya05, у вас в 12 строке закрывающий тег span до открывающего стоит. Хотя, у меня работает даже с неправильным тегом. Вы jQuery и скрипт, который я дал, не забыли подключить? 0

illya05 140 / 96 / 47 Регистрация: 03.08.2013 Сообщений: 765
	02.09.2014, 16:50 [ТС]
	Не работает(( Напишите полностью Ваш код, пожалуйста. Может у Вас другая версия JQuery? 0

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	02.09.2014, 21:48
	illya05, если у вас не ниже 1.7, то должно работать. У меня 2.1.1, но это не принципиально. Я этот скрипт в консоли написал, когда Яндекс открыт был, там 1.8.3. Так я ваш код скопировал, вставил его в body на пустой странице с подключёнными jQuery и своим скриптом, и всё заработало. 1

illya05 140 / 96 / 47 Регистрация: 03.08.2013 Сообщений: 765
	02.09.2014, 23:42 [ТС]
	xenohunter, Странно... Добавлено через 33 минуты Все! Просто NetBeans не тот проект редактировал... А в том скрипте я просто не подключил 1 библиотеку (maskedinput.js). Ваш скрипт тоже работает, Спасибо! 0

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	03.09.2014, 00:05
	illya05, да, бывает иногда. Рад, что у вас всё получилось! 1

Сколько осталось символов до максимума в textarea

Решение