JavaScript

[JavaScript] 時間のコロン編集を行うテキストボックス

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

フォーカスインすると「HHmm」形式、フォーカスアウトすると「HH:mm」形式にするテキストボックスサンプルです。

時間のコロン編集を行うテキストボックス

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

※数値4桁でない場合は編集を行わない

実行サンプル

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

解説

  • onFocus/onBlueイベントハンドラを使用してコロン編集/解除を行っています。
  • 数値4桁でない場合はコロン編集を行いません。
  • 初期表示時は、コロン編集をした数値をセットしておく必要があります。
  • 時間整合性チェックは行っていません。必要な場合は以下を参考に追加してください。 (文字列がHHmm形式の時間文字列であるかどうかチェックする

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

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

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

補足

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

スポンサーリンク

スポンサーリンク

-JavaScript
-,

執筆者:


comment

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

関連記事

[JavaScript] 半角カタカナチェックを行う

半角カタカナチェックを行うサンプルFunctionです。 サンプル 例)値が半角カナのみの場合はtrueを返す(空文字O ...

[JavaScript] 値を厳密に比較する(===、!==) 厳密等価演算子

JavaScriptで値を比較する時、型も同じかどうかを比較するには「===」で比較します。 「===」は厳密等価演算子 ...

[JavaScript] コピー&ペーストを禁止する(onCopy, onPaste)

ページの文字コピーを禁止するサンプルと、 ページへのペースト(貼付け)を禁止するサンプルです。 ページのコピーを禁止にす ...

[JavaScript] 符号を反転させる

符号を反転させるには、マイナスを付ければOKです。 サンプルソース 例)変数aの符号を反転させて変数resultに格納す ...

[JavaScript] グリニッジ標準時(GMT時刻)を取得する(.toGMTString)

グリニッジ標準時(GMT時刻)を取得するには、.toGMTString()を使用します。 サンプルソース 例)現在日時の ...

スポンサーリンク