Запрещенные символы в форме ввода?

Question

Это мой текущий код удаляет все не-числовые символы, кроме $, запятых и точек от входа, когда в качестве типов пользователей:

<input type="text" id="price" name="price" onkeyup="updatePrice(this.value)"> 

function updatePrice(p) { 
    document.getElementById("price").value = p.replace(/[^0-9$.,]/g, ''); 
    } 

Проблема заключается в том, что она удаляет символы после ввода их, так что если вы наберете вы видите его на долю секунды, прежде чем он исчезнет. Keydown не подходит, поскольку он запускает скрипт до того, как вход действительно изменится.

Как я могу полностью предотвратить появление этих запрещенных символов на входе?

Answer 1

• использование onblur для выполнения проверки, когда вход теряет фокус - пользователю dosen't должны быть осведомлены об этом во время ввода текста.
• пользователь должен знать об этом вообще - вы можете выполнить проверку на отправке.

Answer 2

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

// on key press occurs before the text is added visually to the input field 
​document.getElementById('price').addEventListener('keypress', function(e) { 
    if(!String.fromCharCode(e.which).match(/[0-9$\.,]/)) { 
    e.preventDefault(); // not a valid character so cancel it 
    } 
}, false);​​​​​​​​​​​​​ 

// complete validation for the text that was entered on blur to update price 
document.getElementById('price').addEventListener('blur', function(e) { 
    var validated = parseFloat(this.value.replace(/[^0-9\.]g/, '')); 
    // ... use the validated string to do something 
}, false);