Как да предотвратим въвеждането на число при натискане на клавиш?

Искам да предотвратя въвеждането на число при събитие за натискане на клавиш в текстово поле и да изпълня персонализирана функция за обработка. Ето проблемите

  • e.target.value е безполезен, тъй като ключовата стойност все още не е проектирана в целевата стойност
  • e.keyCode за номер зависи от типа на клавиатурата, езиковата подредба, клавиша Fn или Shift
  • String.fromCharCode(e.keyCode) не е надежден, поне на моята клавиатура (чешки qwerty)
  • w3 спецификация казва e.keyCode е наследен атрибут и вместо това предлага e.char, но все още не е внедрен в браузърите

И така, как да уловя въведеното число, преди да се появи в текстовото поле?


javascript keyboard-events cross-browser
person Jan Turoň    schedule 31.03.2013    source източник

Отговори (3)


arrow_upward
26
arrow_downward

Вместо това използвайте събитието keypress. Това е единственото ключово събитие, което ще ви даде информация за знака, който е въведен, чрез свойството which в повечето браузъри и (което е объркващо) свойството keyCode в IE. Използвайки това, можете условно да потиснете събитието keypress въз основа на въведения знак. Това обаче няма да ви помогне да попречите на потребителя да поставя или плъзга текст, съдържащ цифрови знаци, така че все пак ще ви е необходим някакъв вид допълнителна проверка.

Моята любима справка за ключови събития на JavaScript: http://unixpapa.com/js/key.html

textBox.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
    var charStr = String.fromCharCode(charCode);
    if (/\d/.test(charStr)) {
        return false;
    }
};
person Tim Down    schedule 31.03.2013
comment
Невероятно! Понякога e.keyCode е различно в keypress и keydown събитие! Поне в последния ми Chrome. Функция ли е или бъг? - person Jan Turoň; 31.03.2013
comment
@JanTuroň: Според unixpapa.com/js/key.html, в WebKit keyCode е същото като which в keypress събития, което лесно може да се различава от keyCode в keydown събитие (за начало помислете за главни и малки букви: един и същ ключов код, различни кодове на символи). - person Tim Down; 31.03.2013
comment
@JanTuroň: Редакцията ви беше грешна, между другото, така че я върнах назад. Трябва само да използвате e.returnValue в стария IE и дори тогава не в DOM0 манипулатори като този в моя пример. - person Tim Down; 31.03.2013

arrow_upward
15
arrow_downward

Опитайте това, за да замените целочислени стойности:

<input onkeydown="Check(this);" onkeyup="Check(this);"/>

<script>
function Check(me) {
    me.value = me.value.replace(/[0-9]/g, "");
}
</script>

За да предотвратите въвеждане на цяло число:

<input onkeydown="Check(event);" onkeyup="Check(event);"/>

<script>
function Check(e) {
    var keyCode = (e.keyCode ? e.keyCode : e.which);
    if (keyCode > 47 && keyCode < 58) {
        e.preventDefault();
    }
}
</script>
person palaѕн    schedule 31.03.2013
comment
Отчасти вижте втория и третия куршум в моя въпрос: въвеждането на число в цифровата част на клавиатурата варира от 96 до 105, не връща число на String.fromCharCode и може също да варира в зависимост от оформлението на клавиатурата и превключването на клавишите. - person Jan Turoň; 31.03.2013

arrow_upward
0
arrow_downward

Моето решение за предотвратяване на плаващи кодови знаци

    // 'left arrow', 'up arrow', 'right arrow', 'down arrow',
    const = arrowsKeyCodes: [37, 38, 39, 40],
    // 'numpad 0', 'numpad 1',  'numpad 2', 'numpad 3', 'numpad 4', 'numpad 5', 'numpad 6', 'numpad 7', 'numpad 8', 'numpad 9'
    const = numPadNumberKeyCodes: [96, 97, 98, 99, 100, 101, 102, 103, 104, 105],

    export const preventFloatingPointNumber = e => {
    // allow only [0-9] number, numpad number, arrow,  BackSpace, Tab
    if ((e.keyCode < 48 && !arrowsKeyCodes.includes(e.keyCode) || e.keyCode > 57 &&
        !numPadNumberKeyCodes.includes(e.keyCode)) &&
        !(e.keyCode === 8 || e.keyCode === 9))
        e.preventDefault()
    }
person Palaniichuk Dmytro    schedule 27.03.2019