Проверьте длину поля как пользовательские типы

Question

Привет, ребята, я видел эту возможность в Интернете и не совсем уверен, как ее искать, хороший пример - отправка текстового сообщения, которое будет звучать при наборе:

132/160 - и счетчик 132 будет увеличиваться, пока вы не достигнете своего предела.

У меня был вопрос: можно ли работать с одним javascript, без библиотеки jQuery? Однако, если мне придется использовать jQuery, я, возможно, укажу на хороший учебник, или, может быть, он проще или даже некоторые термины для его поиска, спасибо.

Answer 1

Используйте событие oninput, где оно поддерживается (все современные браузеры, IE 9 и более поздние версии) и onpropertychange для старых Internet Explorer:

var myInput = document.getElementById("myInput");
if ("onpropertychange" in myInput && !("oninput" in myInput)) {
    myInput.onpropertychange = function () { 
        if (event.propertyName == "value")
            inputChanged.call(this, event);
    }
}
else
    myInput.oninput = inputChanged;

function inputChanged () {
    // Check the length here, e.g. this.value.length
}

onkeyup не подходит для обработки ввода, так как между пользователем, вводящим текст, и вашим кодом, заметившим изменение, имеется значительная задержка. Пользователь может даже удерживать клавишу (для повторения текста на устройствах Windows), но ваш код не справится с этим.

Answer 2

<!--This is your input box. onkeyup, call checkLen(...) -->
<input type="text" id="myText" maxlength="200" onkeyup="checkLen(this.value)">

<!--This is where the counter appears -->
<div id="counterDisplay">0 of 200</div>


<!--Javascript Code to count text length, and update the counter-->
<script type="text/javascript"><!--
    function checkLen(val){
        document.getElementById('counterDisplay').innerHTML = val.length + ' of 200';
    }
//--></script>

Answer 3

Я думаю, что получил точное решение вашей проблемы Функция countChar принимает объект текстового поля и объект div. Объект div покажет, сколько символов осталось.

function countChar(txtBox,messageDiv)
    {
        try
        {

            count = txtBox.value.length;
            if (count < 160)
            {
                charLeft = 160 - count;
                txt = charLeft + " characters left...keep typing!!";
                messageDiv.innerHTML="<font color=green>" + txt + "</font>";
            }
            else
            {
                messageDiv.innerHTML="<font color=red>Message is too long</font>";
            }
            }
            catch ( e )
            {

            }
    }

<INPUT type="text" id="txtMessage" 
    onkeyup="countChar(txtMessage,messagesuccess);" 
    onkeydown="if(event.keyCode == 13){document.getElementById('btnSendTextMessage').click();}" >

Answer 4

этот код для общего пользования:

html:

<input type="text" name="noteTitle" id="noteTitle" maxlength="100"   onkeyup="checkLength(this,'titleLength')" />
<div id="titleLength">100</div>

JS:

//take field (fieldToCheckMax), and its counterID(titleLength)
function checkLength(fieldToCheckMax,counterID){

//get the maxallowed for the input
maxAllowed=fieldToCheckMax.getAttribute('maxlength');
//save the affected counter in a variable
counterID=document.getElementById(counterID);
//change the value based on the max allowed, to switch between green and red
counterID.innerHTML=colorChanger();
//the color based checker, to decide is it red or green
function colorChanger(){
    if(fieldToCheckMax.value.length < maxAllowed) {
        counterID.style.color='green';
        return maxAllowed-fieldToCheckMax.value.length;}
    else {
    counterID.style.color='red';
    return maxAllowed-fieldToCheckMax.value.length;
    }

}
}

Answer 5

Вот простое решение.

Предполагается, что у вас html-код следующим образом

<textarea onKeyPress='return count(this);'></textarea>
<input type="text" id="info" value="0/160" />

Примечание: идентификатор поля ввода / текста - это информация.Вам потребуется следующий метод javascript

function count(area){
    var proceed = area.value.length < 160;
    document.getElementById('info').value = area.value.length+"/160";
    return proceed;
}

Примечание: идентификатор текстового поля, указанного в методе, и размер 160.

Answer 6

Все, что вам нужно, это обработчик ключей, который проверяет длину строки внутри текстовой области. Вы также можете предоставить атрибут maxlength для текстовой области.

Как только вы обнаружите, что строка пересекает 160 (или wateva ограничение составляет) символов, вы можете предоставить окно предупреждения и затем обрезать строку до первых 160 символов.

Я не собираюсь предоставлять код и ложку кормить вас. Его можно легко найти в Интернете.

Answer 7

Вам нужно перехватить событие onkeyup текстового поля.

Затем вы можете проверить / проверить длину значения текстового поля и (если вы хотите отобразить счетчик для пользователя) обновить счетчик по мере необходимости.