Как ДЕЙСТВИТЕЛЬНО ограничить доступный символ для поля ввода, используя jQuery? - PullRequest
Новая
       12

Как ДЕЙСТВИТЕЛЬНО ограничить доступный символ для поля ввода, используя jQuery?

2 голосов
/ 23 декабря 2009

Я только начал добавлять JS-валидацию в форму регистрации, и мне нужно поле ввода имени пользователя в стиле Twitter (с использованием jQuery). Это означает, что ввод ограничен определенными символами, а другие символы даже не отображаются.

Пока у меня есть это: 

jQuery(document).ready(function() {
 jQuery('input#user_login').keyup(function() { 
    jQuery(this).val( jQuery(this).val().replace(/[^a-z0-9\_]+/i, '') );
  });
});

Это решение работает, но проблема в том, что недопустимый символ появляется, пока пользователь не отпустил ключ (пожалуйста, извините за мой ужасный английский!), И событие keyup не вызывается. Символ мигает в поле ввода на секунду, а затем исчезает.

Идеальным решением было бы то, как это делает Твиттер: персонаж даже не появляется ни разу.

Как я могу это сделать ?? Думаю, мне придется каким-то образом перехватить ввод.

Спасибо!

Ответы [ 4 ]

3 голосов
/ 23 декабря 2009

Если вы хотите ограничить символы, которые пользователь может вводить, а не конкретные ключи, которые будут обрабатываться, вы должны использовать keypress, поскольку это единственное событие, которое сообщает информацию о символах, а не коды клавиш. Вот решение, которое ограничивает символы только буквами A-Z во всех основных браузерах (без использования jQuery): 

<input type="text" id="alpha">


<script type="text/javascript">

function alphaFilterKeypress(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    return /[a-z]/i.test(charStr);
}

window.onload = function() {
    var input = document.getElementById("alpha");
    input.onkeypress = alphaFilterKeypress;
};

</script>
3 голосов
/ 23 декабря 2009

Попробуйте использовать keydown вместо keyup 

jQuery('input#user_login').keydown(function() {

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

jQuery('#user_login').keydown(function() {

должно хватить

Вы можете рассмотреть возможность захвата кода ключа iself, прежде чем присваивать ему значение val 

if (event.keyCode == ...)

Кроме того, вы рассматриваете клавиши alt, ctls и shift? 

if (event.shiftKey) {

if (event.ctrlKey) {

if (event.altKey) {
1 голос
/ 23 декабря 2009

Спасибо @TimDown, что решил проблему! Я немного изменил ваш код, чтобы он принимал клавишу Backspace и стрелки для редактирования (я отправляю ответ, чтобы использовать форматирование кода).

Большое спасибо. 

function alphaFilterKeypress(evt) {
    evt = evt || window.event;

    // START CHANGE: Allow backspace and arrows
    if(/^(8|37|39)$/i.test(evt.keyCode)) { return; }
    // END CHANGE

    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);

    // I also changed the regex a little to accept alphanumeric characters + '_'
    return /[a-z0-9_]/i.test(charStr);
}

window.onload = function() {
    var input = document.getElementById("user_login");
    input.onkeypress = alphaFilterKeypress;
};
0 голосов
/ 23 декабря 2009

Вы можете использовать свойство maxlength во входных данных и паролях: info (так на самом деле это делает Twitter).

...