javascript - フィールドに入力された各文字の検出と条件の実行

Question

私はウェブアプリを構築しています。質問をする前に、ユーザーエクスペリエンスがどのようなものになりたいかを説明するのが最も簡単だと思います。

ユーザーが自分のサイトにアクセスして、テキストフィールドへの入力を開始するようにします。各文字が入力されると、その文字に対して条件ステートメントを実行して、テキストフィールドに追加するかどうかを決定します。入力した文字が自分の欲しいものでない場合、その文字は追加されません。

テキストが送信された後にこれを行うためにモデルに検証がありますが、リアルタイムにしたいです。これは JavaScript に関連していると思いますが、何を検索/調査すればよいかを知るにはコーディングに慣れていません。どこを見ればよいか教えてもらえますか (チュートリアル、コンセプトなど)?

これを読んでいただきありがとうございます。

score 0 · Accepted Answer

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/

score 0 · Accepted Answer

正確にはあなたの状況ではありませんが、非常に良い出発点はこの質問とその回答です: How to allow only numeric (0-9) in HTML inputbox using jQuery?

基本的に、キープレスをインターセプトし、それが許可されたキーである場合にのみ許可する JavaScript を探しています。上記の質問は、数値キーに対してこれを実装しています。それから始めて、必要に応じて拡張します。

2 に答える 2