2013-03-08 3 views
4

Я хочу игнорировать определенные символы на моем телефоне, так что в базе данных есть цифры. Я знаю, что могу сделать это легко на стороне сервера (с помощью PHP), но я пытаюсь понять JS события немного лучше .. Мой вопрос заключается в следующем:Игнорирование входных символов при нажатии клавиши

Если у меня есть основной вход:

var phoneInput = document.getElementById("phoneInput"); 

Я могу добавить слушатель события с помощью «OnKeyDown», который работает отлично

phoneInput.onkeydown = function(e){ 
    var c = String.fromCharCode(e.keyCode); 
    var patt = /\d/; 
    if(!patt.test(c)) return false; 
}; 

Но если я пытаюсь делать то же самое с помощью «addEventListener», возвращая ложь, кажется, ничего не делать

phoneInput.addEventListener("keydown",function(e){ 
    var c = String.fromCharCode(e.keyCode); 
    var patt = /\d/; 
    if(!patt.test(c)) return false; 
}); 

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

+0

В каком браузере вы проверяете это? Почему бы вам не использовать 'type =" number "?? [Вам все равно понадобятся браузеры поддержки, у которых нет поддержки.] – epascarello

+0

@epascarello он по-прежнему позволяет использовать текстовые символы, даже если я определяю тип ввода для числа. (Im развивается в firefox, но я считаю, что большинство браузеров совпадают с этим) – dano

+0

Я знаю, но его собственное приложение в относительно небольшой компании (30 сотрудников), поэтому я говорю им не использовать IE с ней. Кроме того, я удаляю ненужные символы в PHP, прежде чем вставлять их в базу данных, но, как я уже сказал, я просто пытаюсь понять, как JS обрабатывает эти вещи. Благодаря! – dano

ответ

9

Я бы настоятельно советовал не изменять ввод пользователя и не мешать им что-то набирать, когда он это делает. Это сбивает с толку и приводит к плохому пользователю.

В идеале, вы должны держать свою проверку на сторону сервера, а затем использовать функции HTML5, такие как эти:

<input type="number" /> Allows only numbers 
<input type="text" pattern="[0-9. -]*" /> Allows numbers, spaces, periods and hyphens 
<input type="text" required /> Specifies a required field 

Современных браузеры помешают форму из представляемых и настоящих полезных сообщений об ошибке пользователя (который вам можно настроить с помощью атрибута title).

Однако, для общего использования, return false; не обязательно отменяет событие. Для этого вы должны использовать это:

// if you haven't already: 
e = e || window.event; 
// to cancel the event: 
if(e.preventDefault) e.preventDefault(); 
return false; 
+1

Спасибо! и я согласен с меняющимися пользователями, я нахожу это очень раздражающим, но я просто пытаюсь несколько разных вещей, и я думал, что это странно, что onkeydown и addEventListener («keydown» и т. д. не действуют одинаково - - stackoverflow заставляет меня ждать 3 минуты, чтобы принять ваш ответ, но я буду – dano

2

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

// prevent users from typing alpha/ symbol characters on select fields 
$("#modal-region").on("keydown", "#markdown, #sku", function(e) { 

    var key = e.which; 
    // when a keydown event occurs on the 0-9 keys the value 
    // of the "which" property is between 48 - 57 
    // therefore anything with a value greater than 57 is NOT a numeric key 

    if (key > 57) { 
     e.preventDefault(); 

    } else if (key < 48) { 

    // we don't want to disable left arrow (37), right arrow (39), delete (8) or tab (9) 
    // otherwise the use cannot correct their entry or tab into the next field! 

     if (key != 8 && key != 9 && key != 37 && key != 39) { 
      e.preventDefault(); 
     } 
    } 

}); 
Смежные вопросы