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] パスワード用にランダムな文字列を生成する

ランダムな文字列を作成するサンプルです。 サンプルソース 例)半角英数字と一部記号からランダムな8桁文字列を生成する [ ...

[JavaScript] canvasオブジェクトを生成する

JavaScriptでcanvasオブジェクトを生成する方法です。 サンプルソース 例)canvasオブジェクトを生成す ...

[JavaScript] 配列の要素をシャッフルする

配列の要素をシャッフルするサンプルです。 サンプルソース 例)引数に受け取った配列をシャッフルするFunction [c ...

[JavaScript] 関数から複数値を返す

通常JavaScriptの関数の戻り値は1つですが、 以下のようにすれば複数値返すこともできます。 方法1)配列で返す ...

[JavaScript] 2進数、8進数、16進数値⇔10進数を変換する

2進数、8進数、16進数と10進数を変換するサンプルです。 n進数→10進数に変換する n進数を10進数に変換するには、 ...

スポンサーリンク