1

問題：、、、およびイベントonpressで次のコードを使用するhtmlテキスト入力があります。onkeydownonkeyup

this.value = this.value.replace(/[^a-zA-Z0-9]/, '')

これは英数字の検証では機能しますが、ホームキー、終了キー、または矢印キーを使用してカーソルを配置することはできません。カーソルは、バックスペースキーを使用してのみ移動できます。正直なところ、これは望ましい動作である場合もありますが、そうでない場合もあります。

FirefoxとChromeでこの動作が発生するのはなぜですか（IEではまだテストされていません）。私の質問はthis.value =、矢印キーなどの正規表現を見たことがないので、カーソルを最後に置く部分に関係しています。

4

2 に答える 2

3

すべてのキーストローク（実際には、キーストロークごとに3回）でコンテンツ全体を置き換えるため、置き換え後の最後にカレットが配置されます。

別のアプローチを提案します。検証に合格しなかった場合にのみ、フィールドの内容を置き換えます。

<input id="uname" type="text">

var f = document.getElementById('uname');
f.addEventListener('keyup', function(e){
    var regex = /[^a-zA-Z0-9]/;
    if(regex.test(this.value)) {
        this.value = this.value.replace(regex, '')  
    }
});

上記のJavaScriptスニペットは、<script>直前にタグ内に追加する必要があります</body>（または、実行時にフィールドが既に存在することを確認するために、document.ready / DOMContentLoaded / window.onloadハンドラーでラップする必要があります）。

デモ

于 2013-03-19T21:26:43.757 に答える
1

2つのこと：最初に、イベントを3回発生させますが、これは不要のようです。代わりにこれを試してください：

<script type="text/javascript">
    function forceAlphaNumeric(field){
        var invalidChars = /[^a-z0-9]/ig
        if(field.value.match(invalidChars))
            field.value = field.value.replace(invalidChars, '');
     }
</script>
<input id="uname" type="text" onkeypress="forceAlphaNumeric(this);" />
于 2013-03-19T21:27:38.267 に答える