Обнаружение каждого символа, введенного в поле и условия выполнения

Question

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

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

У меня есть проверки в моей модели, чтобы сделать это после отправки текста, но я хочу, чтобы это было в режиме реального времени. Я предполагаю, что это связано с JavaScript, и мне не достаточно удобно кодировать его, чтобы знать, что искать/исследовать. Можете ли вы помочь мне в том, где искать (учебники, концепции и т. Д.)?

Благодарим вас за то, что нашли время, чтобы прочитать это.

Answer 1

Вы можете сделать это с помощью метода preventDefault объекта события, переданного событию keydown. Это в основном говорит браузеру не преформировать свое действие по умолчанию (которое в текстовом поле будет добавлять букву в поле).

Вот реализация с помощью JQuery для краткости, но вы можете реализовать такую ​​же функциональность в чистом JavaScript, а также:

$('input').on('keydown', function(event) { 
    // event.which is the character code 
    if (/* some condition */) event.preventDefault(); 
}); 

А вот скрипка с примером, где вы не можете ввести букву A: http://jsfiddle.net/354XJ/

Answer 2

Это не точно вашей ситуация, но очень хорошая отправная точка будет этим вопрос и его ответов: How to allow only numeric (0-9) in HTML inputbox using jQuery?

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