入力に入力された文字をフィルターする

私はかなり標準的なタスクを得ました:ユーザーが入力に入力した文字をフィルタリングします、つまり、ユーザーは数字と文字のセット、たとえば「5s68d.4r55e.6t5」を入力でき、保存するには正しい量をルーブルで送信する必要があります- '568,455'(ルーブル)。



入力にfocusoutイベントを掛けることでタスクに十分迅速に対処しましたが、私の解決策にはいくつかの重要な欠点がありました。 ユーザーが数分を入力した場合(この場合、負の値も正しい)、どのマイナスを行の先頭と見なす必要がありますか? などなど。



そのため、キーアップイベントの正規表現を含むスクリプトの2番目のバージョンが登場しました。



$(e.curretTarget).val(($(e.currentTarget).val()).replace( /[^0123456789.-]/, '' ))
      
      





しかし、判明したように、この方法には顕著な欠点がありました(ユーザーが入力する文字を見て、この文字が消えることを意味するわけではありません)、たとえば、入力の入力された数字の真ん中にカーソルを置いた場合、文字を入力してから、スクリプトを入力します文字を切り取りますが、行の最後までコースをスローします。



このため、上級同志は、キー押下イベント用の関数を作成するよう指示しました。 30分後、関数の3番目のバージョンの準備が整い、次のようになりました。



 function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY // home, end, period, and numpad decimal return ( key == 8 || key == 9 || key == 13 || key == 46 || key == 110 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); }); }); };
      
      





コードはsteckoverflowから取られていますが、私のコードは上記の例とそれほど変わりませんでした。



すべてが美しく見えました-ユーザーには入力された数字が見えず、カーソルは行末までジャンプしませんが、結局のところ、私たちは早く幸せでした。 異なるオペレーティングシステム(mac、linux、win)のキーのキーコードを見ると、いくつかの違いがありますが、これにすべてのポピーがnumPudを持っているわけではないため、数字はロックされた暗号で入力され、数字も仮想キーボードから入力しました。 その結果、コードは最後の例よりも何倍も大きくなります。



その結果、キーアップイベントのスクリプトを作成しましたが、唯一の欠点がありました。ユーザーには入力された数字が1秒間表示されます。 明らかな理由で、スクリプトを投稿することはできませんが、この状況により、新しいスクリプトを作成するように求められ、それをgithubに投稿しました。 スクリプトをより汎用的にしました-入力で入力された値を変更するよりも、DOM要素に値を転送するように設計されました(次のステップになります)。



執筆時点で、いくつかのパラメーターを関数に渡すことができます。





ご清聴ありがとうございました!



All Articles