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

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

関連記事

[JavaScript] ブロックスコープを定義する

JavaScriptでブロックスコープを定義する方法です。 ECMAScript5以前の環境では即時関数を使用しますが、 ...

[JavaScript] canvasの画像をBase64形式に変換する

canvasの画像をBase64形式に変換するには、.toDataURL()を使用します。 サンプルソース 例)canv ...

[JavaScript] 数値が有限数かどうかチェックを行う(isFinite)

数値が有限数かどうかチェックをするには、isFinite()関数を使用します。 サンプル 例)isFinite関数の結果 ...

[JavaScript] スタイルをCSS表記で設定する(style.cssText)

CSS表記のままJavaScriptでスタイルを指定したい場合は、style.cssTextを使用します。 サンプルソー ...

[JavaScript] 一定時間後に処理を実行する

一定時間後に処理を実行するには、setTimeoutを使用します。 サンプル 例)5秒後に処理を実行する [crayon ...

スポンサーリンク