JavaScriptコードを使用してユーザーの入力を制限するクロスブラウザコード

Question

このコードはStack Overflowを使用してユーザーがテキストボックスに数値を入力することを制限していますが、ChromeおよびIEでのみ機能します。誰でもこれを行うためのクロスブラウザのコードを知っていますか？ 注：既にグローバル属性が追加されていて、それはまったく機能しませんでしたが、これはChromeとIEで完全に機能した唯一の属性でした。

<input type="text" onkeyup="this.value = this.value.replace(/[^a-z]/, '')" /> 

Answer 1

あなたは文字がonkeyupではなく、挿入されますときですonkeydownをキャッチしたいです。また、代わりに番号を除去する、ちょうど私が推薦するevent.preventDefault()

<p> 
 
    <input type="text" onkeydown="event.key.match(/\d/) && event.preventDefault()" /> 
 
</p>

ことの一つは、HTMLからコードを削除し、そのよう機能でそれを入れていると挿入し得ることから、それを防ぐ必要がありますこのような再利用可能である：

// Wait till the dom is loaded 
 
document.addEventListener('DOMContentLoaded', function(e) { 
 
    // Add the event to each input that has `data-type="number"` 
 
    document.querySelectorAll('[data-type=number]').forEach(function(input) { 
 
    // Add the event to the input 
 
    input.addEventListener('keydown', number) 
 
    }) 
 
}) 
 

 
function number(event) { 
 
    event.key.match(/\d/) && event.preventDefault() 
 
}

<p> 
 
    <input type="text" data-type="number" /> 
 
</p>