Предельное количество символов, допустимое в текстовом поле ввода формы - PullRequest
108 голосов
/ 17 декабря 2011

Как мне ограничить или запретить пользователю вводить не более пяти символов в текстовое поле?

Ниже поле ввода как часть моей формы:

<input type="text" id="sessionNo" name="sessionNum" />

Isэто использует что-то вроде maxSize или что-то подобное?

Ответы [ 10 ]

163 голосов
/ 17 декабря 2011

maxlength :

Максимальное количество символов, которое будет принято в качестве ввода.Это может быть больше, чем указано в SIZE, в этом случае поле будет прокручиваться соответствующим образом.Значение по умолчанию не ограничено.

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

Однако ваш обработчик может повлиять или не повлиять на это.Вам также может понадобиться использовать или добавить другую функцию-обработчик для проверки длины.

27 голосов
/ 17 декабря 2011

Самый простой способ сделать это:

maxlength="5"

Итак. Добавление этого атрибута в ваш элемент управления:

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />
8 голосов
/ 17 декабря 2011

Добавьте в шапку следующее:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}
</script>

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />
7 голосов
/ 12 февраля 2014

Согласно w3c , значением по умолчанию для атрибута MAXLENGTH является неограниченное число.Поэтому, если вы не укажете максимальное значение, пользователь может пару раз вырезать и вставлять библию и вставлять ее в форму.

Даже если вы укажете значение MAXLENGTH для разумного числа, обязательно проверьте дваждыдлина переданных данных на сервер перед обработкой (используя что-то вроде php или asp), так как в любом случае довольно просто обойти основное ограничение MAXLENGTH

3 голосов
/ 18 марта 2016

Упростите

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

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

3 голосов
/ 19 февраля 2014

Я всегда делаю это так:

$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
    maxChars.bind('keyup', function(e){
        length = new Number(maxChars.val().length);
        counter = max_length-length;
        $("#sessionNum_counter").text(counter);
    });
}
});

Ввод:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>
2 голосов
/ 13 июня 2017

MAXLENGTH

Максимальное количество символов, которые будут приняты в качестве ввода. Атрибут maxlength указывает максимально допустимое количество символов в элементе.

Максимальная длина W3 школ

  <form action="/action_page.php">
     Username: <input type="text" name="usrname" maxlength="5"><br>
     <input type="submit" value="Submit">
   </form>
2 голосов
/ 10 июля 2016
<input type="text" maxlength="5">

максимальное количество букв, которое может быть на входе, составляет 5.

1 голос
/ 14 мая 2019
<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}
1 голос
/ 16 апреля 2017

Вы можете использовать <input type = "text" maxlength="9"> или

<input type = "number" maxlength="9"> для номеров или <input type = "email" maxlength="9"> для проверки электронной почты появится

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...