Количество оставшихся символов

@paskalnikita · Регистрация: 12.08.2014

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

Всем доброго времени суток! Есть форма, в которой подсчитывается кол-во введеных символов. Сам подсчет начинается лишь тогда, когда начинается набор, при этом не важно есть ли в поле текст или нет - подсчет начнется после клика/наведения курсора на него.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    function length_check(len_max, field_id, counter_id) {
    var len_current = document.getElementById(field_id).value.length;
    var rest = len_max - len_current;
    if (len_current > len_max ) {
        document.getElementById(field_id).value = document.getElementById(field_id).value.substr (0, len_max);
            if (rest < 0) { 
                rest = 0;
            }
            document.getElementById(counter_id).firstChild.data = rest; 
            alert('Максимальная длина содержимого поля: ' + len_max + ' символа(-ов)');
    } else {
            document.getElementById(counter_id).firstChild.data = rest; 
        }
} </script>
            <form name="name1" action="index.php" method="post">
            <textarea name="textarea" id="textarea"
                onfocus="length_check(256, 'textarea', 'counter')"
                onkeyup="length_check(256, 'textarea', 'counter')" >
            </textarea> Осталось символов: <span id="counter">256</span> <input type="submit" value="Добавить" /> </form>

Думал применить autofocus, но курсор попадает в начало формы, перед написанным ранее текстом. Скажите, как сделать,чтобы подсчет был всегда? Заранее спасибо!

@Lazy_Den · 21.04.2015, 21:25

paskalnikita, такой варинт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
name1.textarea.addEventListener('input', calcChars, false);
name1.textarea.addEventListener('focus', calcChars, false);
var max = 256;
function calcChars() {
    var left = max - this.value.length;
    if(left < 0) {
        this.value = this.value.substr(0, max);
        alert('Ахтунг! С вас хватит и 256 символов!');
        return false;
    }
    counter.style.color = left <= 10 ? '#f00' : '#060';
    counter.textContent = max - this.value.length;
}

@paskalnikita · 21.04.2015, 21:28 **[ТС]**

что-то не работает,ваш вариант работает аналогично моему

@Lazy_Den · 21.04.2015, 21:32

Сообщение от paskalnikita

что-то не работает

Код разместите или в конце документа, перед закрывающим тегом </body> (что в принципе рекомендуется), или же отслеживайте загрузку документа и разместить в <head>.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.addEventListener('load', function(){
 
    name1.textarea.addEventListener('input', calcChars, false);
    name1.textarea.addEventListener('focus', calcChars, false);
    var max = 256;
    function calcChars() {
        var left = max - this.value.length;
        if(left < 0) {
            this.value = this.value.substr(0, max);
            alert('Ахтунг! С вас хватит и 256 символов!');
            return false;
        }
        counter.style.color = left <= 10 ? '#f00' : '#060';
        counter.textContent = max - this.value.length;
    }
    
}, false);

Добавлено через 1 минуту
P.S. И не забудьте поубирать inline-обработчики событий из тегов (onfocus, onkeyup и прочее).

@paskalnikita · 21.04.2015, 21:35 **[ТС]**

может, я что не так делаю, но ваш вариант - аналог моего, после перезегрузки старницы, js не считывает кол-во символов, введенных в форму ранее

@Lazy_Den · 21.04.2015, 21:36

Забыл добавить еще одну строку. Допишите:

JavaScript
1
name1.textarea.focus();

После функции

@paskalnikita · 21.04.2015, 21:37 **[ТС]**

что-то тоже самое

@Lazy_Den · 21.04.2015, 21:38

paskalnikita, проверьте еще раз.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.addEventListener('load', function(){
 
    name1.textarea.addEventListener('input', calcChars, false);
    name1.textarea.addEventListener('focus', calcChars, false);
    var max = 256;
    function calcChars() {
        var left = max - this.value.length;
        if(left < 0) {
            this.value = this.value.substr(0, max);
            alert('Ахтунг! С вас хватит и 256 символов!');
            return false;
        }
        counter.style.color = left <= 10 ? '#f00' : '#060';
        counter.textContent = max - this.value.length;
    }
    name1.textarea.focus();
    
}, false);

@paskalnikita · 21.04.2015, 21:43 **[ТС]**

сами посмотрите, то же самое, https://yadi.sk/i/nKe_JzmPg9T4X подсчет начинается только после клика в форме

@Lazy_Den · 21.04.2015, 21:46

paskalnikita, всё ясно... Я проверял в Chrome. Замените строку:

JavaScript
1
2
3
name1.textarea.focus();
// на эту
calcChars.call(name1.textarea);

@paskalnikita · 21.04.2015, 21:49 **[ТС]**

Ага , все работает, получается, чтобы рабоитало везде, надо написать эти две строки в конце? то есть без замены одной на другую, а обе

@Lazy_Den · 21.04.2015, 21:56

Сообщение от paskalnikita

надо написать эти две строки в конце?

Нет не нужно. Последний вариант и более правильный, и работать будет во всех современных браузерах.

@paskalnikita · 24.05.2015, 10:55 **[ТС]**

Еще нашел один недочет, суть такова: если использовать "кнопку смайлика" я могу написать больше 255 символов, не подскажите, как это иcправить?

HTML5
1
2
3
4
5
                                    <div class="smile-box">
                                        <div class="smile-box-wrapper">
                                            <a class="smile1" style='cursor:pointer;'onclick="smile();"></a>
                                        </div>
                                    </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Select smile
function smile(){
    insertTextAtCursor(document.getElementById('comment_area'),':) ');
}
 
function insertTextAtCursor(el, text, offset) {
    var val = el.value, endIndex, range, doc = el.ownerDocument;
    if (typeof el.selectionStart == "number"
            && typeof el.selectionEnd == "number") {
        endIndex = el.selectionEnd;
        el.value = val.slice(0, endIndex) + text + val.slice(endIndex);
        el.selectionStart = el.selectionEnd = endIndex + text.length+(offset?offset:0);
    } else if (doc.selection != "undefined" && doc.selection.createRange) {
            el.focus();
            range = doc.selection.createRange();
            range.collapse(false);
            range.text = text;
            range.select();
        }
}

Сам смайлик ставится в поле,при клике он подставляется, но подсчет символов не происходит.

@alexsamos33 · 24.05.2015, 12:08

Cделайте ещё реакцию на событие onchange.

Добавлено через 2 минуты
Или вручную вызывайте функцию calcChars() перед вставкой / после вставки смайлика.

@paskalnikita · 24.05.2015, 12:23 **[ТС]**

вот так? onclick="smile();calcChars();"

Добавлено через 11 минут
alexsamos33, не работает. сделал так:
<textarea onchange='calcChars();' placeholder="Leave a comment"></textarea>

@paskalnikita · 27.05.2015, 09:58 **[ТС]**

alexsamos33, onchange срабатывает только при отправке формы, а мне нужен подсчет символов непосредственно при их вводе

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	21.04.2015, 21:28 [ТС]
	что-то не работает,ваш вариант работает аналогично моему 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	21.04.2015, 21:35 [ТС]
	может, я что не так делаю, но ваш вариант - аналог моего, после перезегрузки старницы, js не считывает кол-во символов, введенных в форму ранее 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	21.04.2015, 21:37 [ТС]
	что-то тоже самое 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	21.04.2015, 21:43 [ТС]
	сами посмотрите, то же самое, https://yadi.sk/i/nKe_JzmPg9T4X подсчет начинается только после клика в форме 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	21.04.2015, 21:49 [ТС]
	Ага , все работает, получается, чтобы рабоитало везде, надо написать эти две строки в конце? то есть без замены одной на другую, а обе 0

@alexsamos33 669 / 640 / 335 Регистрация: 26.04.2014 Сообщений: 2,122
	24.05.2015, 12:08
	Cделайте ещё реакцию на событие onchange. Добавлено через 2 минуты Или вручную вызывайте функцию calcChars() перед вставкой / после вставки смайлика. 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	24.05.2015, 12:23 [ТС]
	вот так? onclick="smile();calcChars();" Добавлено через 11 минут alexsamos33, не работает. сделал так: <textarea onchange='calcChars();' placeholder="Leave a comment"></textarea> 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	27.05.2015, 09:58 [ТС]
	alexsamos33, onchange срабатывает только при отправке формы, а мне нужен подсчет символов непосредственно при их вводе 0

Количество оставшихся символов

Решение