Как предотвратить ввод недопустимых символов в поля ввода - PullRequest
Новая
       15

Как предотвратить ввод недопустимых символов в поля ввода

10 голосов
/ 27 ноября 2011

Onkeydown, я запускаю следующий JavaScript: 

function ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-\s]/ig, '') : null;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-\s]/ig, '') : null;
   }
}

Один из этих трех атрибутов заголовка присваивается различным полям ввода на странице. Код работает до тех пор, пока недопустимые символы удаляются правильно, но только после ввода следующего символа. Я хочу найти способ просто отрицать неправильный ввод в первую очередь. Я ценю вашу помощь!

Редактировать : Я создаю события глобально. Вот как я это делаю: 

      function Globalization() {
      var inputs = document.getElementsByTagName('input');
      for (i = 0; i < inputs.length; i++) {
          inputs[i].onfocus = createEventHandler(
              ThisOnFocus, inputs[i]);
          inputs[i].onblur = createEventHandler(
              ThisOnBlur, inputs[i]);
          inputs[i].onkeydown = createEventHandler(
              ThisOnKeyDown, inputs[i]);
          inputs[i].onkeyup = createEventHandler(
              ThisOnKeyUp, inputs[i]);
      }
  }

Globalization() выполняется body.onload

Следовательно, типичное поле ввода имеет HTML без вызовов функций, например: 

          <input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/>

Ответы [ 6 ]

20 голосов
/ 28 сентября 2012

Чтобы предотвратить его установку в первую очередь, вы можете вернуть false в обработчике события keydown, тем самым предотвращая дальнейшее распространение события.

Я написал пример ниже с использованием jQuery, но вы можете использовать ту же функцию при традиционном связывании.

Хотя проверка на стороне сервера также важна, проверка на стороне клиента важна для удобства пользователя. 

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});
6 голосов
/ 01 мая 2015

Приведенный выше код говорит: разрешены ТОЛЬКО числа.Вы можете изменить его, добавив исключение, например, BACKSPACE, например, 

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charval= String.fromCharCode(e.keyCode);
                if((isNaN(charValue)) && (e.which != 8 )){ // BSP KB code is 8
                    e.preventDefault();
                }
                return true;
            }
        </script>
    </head>

    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>
2 голосов
/ 17 июля 2014

Код полезен для предотвращения ввода пользователем любого другого символа, кроме цифры. 

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charval= String.fromCharCode(e.keyCode);
                if(isNaN(charval)){
                    return false;
                }
                return true;
            }
        </script>
    </head>

    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>
1 голос
/ 15 декабря 2012

Я нашел это решение в: http://help.dottoro.com/ljlkwans.php

работает как задумано. 

<script type="text/javascript">
    function FilterInput (event) {
        var keyCode = ('which' in event) ? event.which : event.keyCode;

        isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) ||
                    (keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */);
        modifiers = (event.altKey || event.ctrlKey || event.shiftKey);
        return !isNumeric || modifiers;
    }
</script>

< body>
The following text field does not accept numeric input:
<input type="text" onkeydown="return FilterInput (event)" />< /body>

он позволяет текст и! "# $% & Но вы можете настроить его, добавив их впроверка разрешить только числа путем удаления! в ответе

0 голосов
/ 03 мая 2017 
$('.key-filter').keypress(function () {
    if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();
});

затем добавьте класс фильтра ключей к вашему вводу, если используете jquery или 

<input type="text" onkeypress="if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();" />

, просто поместите символы, которые вы хотите разрешить, в [] после ^.это позволяет все буквы цифры _ - и.

0 голосов
/ 27 ноября 2011

Запустите ваш код для события onkeyup, а не для события onkeydown.Таким образом, вы можете получить доступ к результату последнего нажатия клавиши, когда событие onkeyup выполняется при нажатии клавиши, не зная ее результата.

...