Clever Geek Handbook

入力内の数値の入力マスクのプラグイン

多くの場合、タスクは入力フィールドに文字を入力する機能を制限することです。 多くのソースは、これを次の方法で行うことを提案し、次のコードでキーアップイベントハンドラーをハングさせます。 

return ((event.keyCode>47)&&(event.keyCode<58))


この方法には多くの欠点があります。たとえば、ユーザーはテンキーの数字、タブ、上、左などを入力することもできません。キーはオペラでは機能しません。

正しい方法は？

しかし、優れたアイデアもあり、完成すれば、望ましい結果を達成できます。 

  function testKey(e) { // Make sure to use event.charCode if available var key = (typeof e.charCode == 'undefined' ? e.keyCode : e.charCode); // Ignore special keys if (e.ctrlKey || e.altKey || key < 32) return true; key = String.fromCharCode(key); return /\d/.test(key); }


このコードに基づいて、jQueryプラグインを作成することにしました。 しかし、車輪を再発明しないために、既製のプラグインを探すことにし、 digitalbush.com/projects/masked - input - pluginを見つけました。 本当に素晴らしいプラグインですが、フィールドの条件を整数または小数のいずれかに設定できるようにするために必要でした。

そして、私は自分自身にどんなタスクを設定しました：

  1. タイプをfloat、int、または正規表現に設定します。
  2. float型の区切り文字を設定します。
  3. セパレータの前後の文字数を設定します。
  4. ユーザーがコンテキストメニューから値を挿入した場合のデフォルト値。


前述のように、キーを押したときに、コードを文字に変換し、正規表現を使用してチェックしました。 ユーザーがコンテキストメニューを介して値を挿入した場合にのみ提供するために残っています。このため、必要な正規表現を確認するためにblurイベントにハンドラーを掛けました。

しかし、すべてをチェックし始めたとき、ユーザーが入力でテキストの一部をマウスで選択したことに気付きました。 彼は不正な文字を挿入し、この正規表現をバイパスし、これを回避するために、選択したテキストを取得し（ここでブラウザ間の互換性を処理する必要がありました）、条件に従ってチェックしました。

githubとデモのソース

使用された文献：

  1. habrahabr.ru/blogs/javascript/55922
  2. xpoint.ru/know-how/JavaScript/PoleznyieFunktsii?38#Fil 'trVvodaDlyaTekstovogoPolya


More articles:


All Articles