Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
1

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

21.04.2015, 21:12. Просмотров 624. Ответов 15
Метки нет (Все метки)

Всем доброго времени суток! Есть форма, в которой подсчитывается кол-во введеных символов. Сам подсчет начинается лишь тогда, когда начинается набор, при этом не важно есть ли в поле текст или нет - подсчет начнется после клика/наведения курсора на него.
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, но курсор попадает в начало формы, перед написанным ранее текстом. Скажите, как сделать,чтобы подсчет был всегда? Заранее спасибо!
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.04.2015, 21:12
Ответы с готовыми решениями:

Кол-во оставшихся символов
Не получается сделать при вводе ,чтоб сверху отображалось кол-во оставшихся...

Отобразить количество дней оставшихся до конца текущего года
здравствуйте, как отобразить количество дней оставшихся до конца текущего года?

количество символов в див
Здраствуйте дайте пожалуйста скрипт где можно узнать количество символов,...

Сокращение количество символов на js
Доброго времени суток ! У меня вопрос вот какой : Как на js можно...

Количество символов после запятой
Добрый день! При выведении расчетов я пользуюсь .toFixed(2) для того что бы...

15
Lazy_Den
2934 / 2612 / 1318
Регистрация: 15.01.2014
Сообщений: 5,735
21.04.2015, 21:25 2
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;
}
0
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
21.04.2015, 21:28  [ТС] 3
что-то не работает,ваш вариант работает аналогично моему
0
Lazy_Den
2934 / 2612 / 1318
Регистрация: 15.01.2014
Сообщений: 5,735
21.04.2015, 21:32 4
Цитата Сообщение от 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 и прочее).
0
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
21.04.2015, 21:35  [ТС] 5
может, я что не так делаю, но ваш вариант - аналог моего, после перезегрузки старницы, js не считывает кол-во символов, введенных в форму ранее
0
Lazy_Den
2934 / 2612 / 1318
Регистрация: 15.01.2014
Сообщений: 5,735
21.04.2015, 21:36 6
Забыл добавить еще одну строку. Допишите:
Javascript
1
name1.textarea.focus();
После функции
0
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
21.04.2015, 21:37  [ТС] 7
что-то тоже самое
0
Lazy_Den
2934 / 2612 / 1318
Регистрация: 15.01.2014
Сообщений: 5,735
21.04.2015, 21:38 8
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);
0
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
21.04.2015, 21:43  [ТС] 9
сами посмотрите, то же самое, https://yadi.sk/i/nKe_JzmPg9T4X подсчет начинается только после клика в форме
0
Lazy_Den
2934 / 2612 / 1318
Регистрация: 15.01.2014
Сообщений: 5,735
21.04.2015, 21:46 10
Лучший ответ Сообщение было отмечено paskalnikita как решение

Решение

paskalnikita, всё ясно... Я проверял в Chrome. Замените строку:
Javascript
1
2
3
name1.textarea.focus();
// на эту
calcChars.call(name1.textarea);
1
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
21.04.2015, 21:49  [ТС] 11
Ага , все работает, получается, чтобы рабоитало везде, надо написать эти две строки в конце? то есть без замены одной на другую, а обе
0
Lazy_Den
2934 / 2612 / 1318
Регистрация: 15.01.2014
Сообщений: 5,735
21.04.2015, 21:56 12
Цитата Сообщение от paskalnikita Посмотреть сообщение
надо написать эти две строки в конце?
Нет не нужно. Последний вариант и более правильный, и работать будет во всех современных браузерах.
0
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
24.05.2015, 10:55  [ТС] 13
Еще нашел один недочет, суть такова: если использовать "кнопку смайлика" я могу написать больше 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();
        }
}
Сам смайлик ставится в поле,при клике он подставляется, но подсчет символов не происходит.
0
alexsamos33
618 / 598 / 325
Регистрация: 26.04.2014
Сообщений: 1,968
24.05.2015, 12:08 14
Cделайте ещё реакцию на событие onchange.

Добавлено через 2 минуты
Или вручную вызывайте функцию calcChars() перед вставкой / после вставки смайлика.
0
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
24.05.2015, 12:23  [ТС] 15
вот так? onclick="smile();calcChars();"

Добавлено через 11 минут
alexsamos33, не работает. сделал так:
<textarea onchange='calcChars();' placeholder="Leave a comment"></textarea>
0
paskalnikita
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,068
27.05.2015, 09:58  [ТС] 16
alexsamos33, onchange срабатывает только при отправке формы, а мне нужен подсчет символов непосредственно при их вводе
0
27.05.2015, 09:58
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.05.2015, 09:58

Ограничение на количество вводимых символов
Всем доброго времени суток, столкнулся с такой проблемой, как ограничение...

Как на JS сделать проверку на минимальное количество символов?
Например минимальное кол-во символов - 200, нужно вывести уведомление, если...

Циклически сдвинуть вправо заданною строку на заданное количество символов.
Помогите пожалуйста решить задачку: Циклически сдвинуть вправо заданною строку...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru