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の型

JavaScriptではvarで変数宣言するのであまり型を意識しないかもしれませんが、 内部的には以下の型が自動で判定さ ...

[JavaScript] sleep処理を行う

JavaScriptには標準でsleep関数が無いので、sleep処理を行いたい場合は自作する必要があります。 サンプル ...

[JavaScript] 要素を生成する(document.createElement)

JavaScriptでHTMLの要素を生成するには、document.createElementを使用します。 サンプル ...

[JavaScript] 動的に追加したイベントを削除する(removeEventListener)

動的に追加したイベントを削除するには、removeEventListenerを使用します。 (動的にイベントを追加する方 ...

[JavaScript] Base64形式の画像データをimgタグに表示する

Base64形式の画像データをimgタグに表示するサンプルです。 サンプルソース 例)Base64文字列をimgタグにセ ...

スポンサーリンク