Обнаружение переполнения в поле ввода

Question

Есть ли способ обнаружить с помощью jQuery, если поле ввода начинает переполняться? Или мне нужно сделать это с помощью <textarea></textarea> или что-то в этом роде?

Я уже пробовал с:

<input id="inputField" type="text" /> 

<script> 
    $(document).ready(function() { 
     $("input").keyup(function() { 
      var maxLen = 3 
      var box = document.getElementById('inputField')[0]; 
      if (box.value.length > maxLen - 1) { 
       alert('stop'); 
      } 
     }); 
    }); 
</script> 

Но это на самом деле не работает.

Answer 1

Я сделал пару изменений, но важно удалить [0] с вызова getElementById.

$(document).ready(function() { 
    $("input").keyup(function() { 
     var maxLen = 3; 
     var box = document.getElementById('inputField'); 
     if (box.value.length >= maxLen) { 
      alert('stop'); 
     } 
    }); 
}); 

Вы также можете опереться на pure HTML validation:

<input id="inputField" type="text" maxlength="3" /> 

и атрибуты проверки HTML5 ...

<input id="inputField" type="text" maxlength="3" required /> 

Если вы просто хотите, чтобы текстовое поле, чтобы расширить как типы кто-то, вы можете используйте это:

С учетом этого входа:

<p>Test Input: <input type="text" size="4" name="test" id="test" /></p> 

Это будет расширяться по мере ввода:

var testInput = document.getElementById('test'); 

var setLength = function() { 
    testInput.size = testInput.value.length ? testInput.value.length : 1; 
}; 

testInput.onkeyup = setLength; 

setLength(); 

Answer 2

Вы действительно не должны использовать JQuery для этого, если ваша цель состоит в том, чтобы ограничить ввод данных пользователем. Вы также можете использовать:

<input maxlength="number"> 

Читайте об этом на this W3schools page

Если вы должны использовать JQuery вы могли бы сделать что-то вроде этого:

$('input#input_amount').keyup(function() { 
     $(this).val(function (i, val) { 

      if (val.length>3){ 
       alert('stop'); 
      }; 
      return val; 
     }); 
    }); 

в действии здесь: http://jsfiddle.net/BkZcq/

Я отредактировал этот ответ (комментарии):

$('input#input_amount').keyup(function() { 
     $(this).val(function (i, val) { 

      if (val.length>3){ 
       $(this).attr("size", val.length +1); 
      }; 
      return val; 
     }); 
    });