JavaScript

[JavaScript] 数値カンマ編集を行うテキストボックス

投稿日:2016年10月16日 更新日:

フォーカスが当たるとカンマ編集を解除し、フォーカスが外れるとカンマ編集を行うテキストボックスのサンプルです。

数値カンマ編集を行うテキストボックス

例)フォーカスインでカンマ編集を解除、フォーカスアウトでカンマ編集を行う

※数値でない場合は編集を行いません。

実行サンプル

フォーカスインでカンマ編集解除、フォーカスアウトでカンマ編集を行います。

解説

  • onFocus/onBlueイベントハンドラを使用してカンマ編集/解除を行っています。
  • 数値でない場合はカンマ編集を行いません。
  • スペースのみの場合もカンマ編集を行いません。
  • 初期表示時は、カンマ編集をした数値をセットしておく必要があります。

テキストボックスにonfocus/onblurを指定しないパターン

 カンマ編集を行うテキストボックスが1つであればタグにonfocus/onblurを書いても問題ないですが、複数ある場合だと全てのテキストボックスにonfocus/onblurを書かなければならず、見た目やメンテナンス性が悪くなってしまいます。

 そこで以下のように記述すれば、class="number"と指定された全てのテキストボックスがカンマ編集されるようになります。

解説

  • ロードイベントでclass="number"が指定されたもの全てに対して、onfocus/onblurイベントを追加して実現しています。
  • 先サンプルのtoComma関数、offComma関数の定義は必要です。
  • class="number"を指定するのはテキストボックスのみに指定してください。

スポンサーリンク

スポンサーリンク

-JavaScript
-, ,

執筆者:



comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサーリンク