価格のフォーマット、または入力の書き直し方法

仕事のために、最近、一見些細なタスクに遭遇しました-価格をフォーマットし、カテゴリーで割る。

複雑なことは何も決めていません。 特にインターネットでは、シンプルで退屈な（行を広げ、3文字ごとにスペースを追加し、元に戻す）から非常に興味深いものまで、すでに多くの既製のソリューションがあります（多くの人がこのレギュラーシーズンを見たことは確かですが、彼女についてではありません）

price.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

将来を見据えることは、タスクを完了するために標準的な方法の1つをどのように使用したか、松葉杖をどのように作成したかについての話ではありません。

仕事を始める前に、私は多くの資料と50の図書館を勉強しました。 そのような機能はどこにも見つかりませんでした。

これが誰かに役立つことを願っています。



図書館でさえ、数字を数字ごとに分解することに目を光らせていましたが、前述のレギュラーシーズンに立ち寄ることに決めました。

keyupのフォーマットをハングアップし 、もっと難しいことはありますか？



テスターが気に入らなかった最初のことは、文字の入力でした。 イベントはキーアップでハングアップするため、キーがリリースされるまで、 一瞬文字が表示されます。 保持すると、このフィールドに文字列が表示され、キーを押すと消えます。

問題ではない、私は考えてキーダウンに固執しました

 var code = event.keyCode; if((code < 48 || code > 57) && (code < 96 || code > 105)) { event.preventDefault(); return; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初の条件は上の数値キーに対するもので、2番目の条件はNumPadに対するものです

素晴らしい、今は数字以外のものをクリックしても何も起こりません。

1週間が経ちましたが、この小さなフォーマットの入力について考えるのを忘れました。突然、エラーのリストが私に落ちました。

オフハンド-

• 中央の要素を編集すると、カーソルはフィールドの最後に移動します（値を新しいフォーマットの値に置き換えた結果）
• 前方キー、後方キーは機能しません
• 選択は機能しません
• バックスペースと削除が機能しない
• shift + *も機能しませんが、Ctrlのように

さらに、ボタンのクリックに関連している

私が考えてキーアップに追加したそんな大きな問題ではない

 if ( code == 9 || // tab code == 27 || // ecs event.ctrlKey === true || //     ctrl event.metaKey === true || event.altKey === true || //     alt event.shiftKey === true || //     shift (code >= 112 && code <= 123) || // F1 - F12 (code >= 35 && code <= 39)) // end, home,  { return; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

カーソル位置を追跡するには、2つの関数を取得/設定-CursorPosition

キーアップごとに

  var cursor = $(this).getCursorPosition(); $(this).val(priceFormatted(value)); $(this).setCursorPosition(cursor);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

彼はこのすべてのコードのテストに従事しており、ダブルキー（ Ctrl + Aなど）を押したときにキーアップイベントをキャッチできないことに気付きました。

理論的には、テキスト全体が目立つはずですが、実際には次のことが起こりました。 キーダウンでは何も起こりませんで（ event.ctrlKey === true; return false ）、テキストが目立ちました。 キーアップにより、テキストが再フォーマットされ、選択がリセットされました。

最初は、過去の値の長さと新しい値の長さをチェックすることで構成しようとしましたが、文字を削除する必要がある場合（ハイライトして文字/数字を押す）、すべてが機能しませんでした。

その結果、 キーアップを完全に放棄し、完全にkeydownに切り替えることが決定されました 。

私はこのソリューションのブラウザ間の互換性を非常に疑っていたため、これは前兆ではありませんでした。一般的に、必要に応じて各キーのコードを読み、文字を追加したくありませんでした。



一般的に、このすべての結果。



まず第一に、とにかく将来便利になる変数を示します

  var cursor = $(this).getCursorPosition(); var code = event.keyCode; var startValue = $(this).val();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、どのキーが押されたかを判断する必要があります

  if ((code >= 48 && code <= 57)) { key = (code - 48); } else if ((code >= 96 && code <= 105 )) { key = (code - 96); } else { return false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コード48-57のキーは上桁0-9で、コード96-105はテンキーに対応します

他のキーが押された場合、何もしません。

カーソルがあった場所に新しい値を挿入し、カーソルをフォーマットして再配置します。

  var value = startValue.substr(0, cursor) + key + startValue.substring(cursor, startValue.length); $(this).val(priceFormatted(value)); $(this).setCursorPosition(cursor + $(this).val().length - startValue.length);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

悪くはありませんが、テキストを選択して数字を書き込もうとするとどうなりますか？ そうです、テキストは削除されず、新しい番号が古い番号を置き換えます

クリックするたびに、選択したテキストを簡単に削除できます-jquery plugin

 $(this).delSelected();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バックスペースに戻り、キーを削除します。 ここのすべても非常に簡単です。

 $(this).val(startValue.substr(0, cursor - 1) + startValue.substring(cursor, startValue.length)); //   //  $(this).val(startValue.substr(0, cursor) + startValue.substring(cursor + 1, startValue.length)); //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、選択チェックを追加します。テキストを選択してバックスペースまたは削除を押すと、選択したもの以外は削除されないためです。

カーソルがスペースの前にあり、ユーザーがバックスペースを押す場合も、作業のロジックが必要でした

すべての操作の後、バックスペースをクリックすると次のようになりました

  var delCount = $(this).delSelected(); if (!delCount) { if (startValue[cursor - 1] === ' ') { cursor--; } $(this).val(startValue.substr(0, cursor - 1) + startValue.substring(cursor, startValue.length)); } $(this).val(priceFormatted($(this).val())); $(this).setCursorPosition(cursor - (startValue.length - $(this).val().length - delCount));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

削除を押すとほとんど同じように見えましたが、ほとんどの加算/減算記号のみが逆になりました。

夕方、新しい報告とともにタスクが再び私に戻ってきました。

• フィールドにテキストを挿入できます
• テキストをそこにドラッグできます

やらなきゃ。 実装の挿入の禁止は非常に簡単に失敗しました

 if ( (event.metaKey === true && code == 86) || (event.ctrlKey === true && code == 86) || // Ctrl+V | Shift+insert (event.shiftKey === true && code == 45) ) { return false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、コンテキストメニューを開くことの禁止

 .bind('contextmenu', function (event) { event.preventDefault(); })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ドラッグアンドドロップはうまくいきませんでした。

 .bind('drop', function (event) { // ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして興味深いことに、奇妙なことにクロムから始まりました。

彼だけが正しく処理することを拒否し、私が機能でした場合

 event.preventDefault(); //  return false;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

彼は入力に2番目のカーソルを残しましたが、ページまたはコンソールを更新する以外の方法では削除されませんでした

 $('...').val(''); //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

問題は非常にextremelyいコードによって解決されました

 .bind('drop', function (event) { var value = $(this).val(); $(this).val(''); //    //       . //         . $(this).val(value); event.preventDefault(); })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

誰かがそのような問題に遭遇して、退会することに決めたなら、どうぞ。



これにより、価格設定で私の冒険が終わりました。

2週間-フライトは正常ですが、バグは確認されておらず、ブラウザ間の互換性は壊れていません。



インターネットで類似物を見つけられなかったので、私はそれをみんなと共有することにしました。 すべてをjqueryライブラリとして設計しました



ここをクリックしてクリックすることができます（jsfiddle）

およびダウンロード- ここ（github）