NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

jQueryと正規表現で金額入力用のフォームを作る

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1159日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

あんまり使う機会はないけど、たまーに使うことがあるのでメモ。

今回は、 input_price というクラスのテキスト欄を作り、そこにスクリプトを書きました。

 

デモ

ただ、キーアップ時のイベントを入れると、仕組み上

  • カーソルキーでカーソルを移動できなくなるため、途中に数字を入力するにはマウスで選択するしか無くなる
  • 上記の場合でも2文字以上連続で入力できない(1文字入力した時点で末尾に移動してしまう)

といった問題が発生してしまいます。

なので、場合によっては

  • 数字以外の時でも自動的に削除はせずに、エラーの吹き出しを表示する等の方法で警告する
  • キーアップ時のイベントを使わないで(入力時点で数字以外が入力されてもとりあえず放っておいて)、その後入力内容の確認画面などでチェックする
  • フォーカスが外れたタイミングで一気にチェックする

みたいな別の方法を考えてみたほうがいいのかも…。

参考

数字をカンマ区切り設定 | 私的雑録

jQuery: input[text]で数字のみ入力させるjQueryスクリプト | Web Design Inspiration

TAGS