コピペで使える JavaScript逆引きリファレンス

JavaScript/jQuery開発時に、こそっとお使いください。

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] ラジオボタンのvalue値を取得する

ラジオボタンのvalue値を取得するサンプルです。 サンプル 例)ボタンを押すとラジオボタンname='grp1'のva ...

[JavaScript] 日付を和暦で表示する

日付を和暦で表示するサンプルです。 toLocaleDateStringを使う方法 toLocaleDateString ...

[JavaScript] テキストボックスを読み取り専用にする

テキストボックスを読み取り専用にするには、readOnlyプロパティを設定します。 サンプル 例)ボタンを押すたびにテキ ...

[JavaScript] 要素にclassを追加・削除する(classList)

JavaScriptで、要素にclassを追加・削除するサンプルです。 サンプルソース 例)要素にclassを追加・削除 ...

[JavaScript] コンソールにオブジェクトの中身をテーブル形式で出力する(console.table)

コンソールにオブジェクトの中身をテーブル形式で出力するには、console.tableを使用します。 サンプルソース 例 ...

スポンサーリンク