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] 数値が有限数かどうかチェックを行う(isFinite)

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

[JavaScript] replaceAllを実装する

JavaScriptではreplaceメソッドはありますが、replaceAllメソッドはありません。 そこで、repl ...

[JavaScript] 複数の同名idを定義した場合の動き

1つのHTML中ではidは一意にする必要がありますが、誤って同名のidを複数定義してしまった場合にどのような動きとなるか ...

[JavaScript] 文字列からFunctionを生成する

文字列からFunctionを生成するサンプルです。 サンプルソース 例)文字列からFunctionを生成して実行するサン ...

[JavaScript] 例外処理

例外処理のサンプルです。 例外処理の構文 例外処理の構文と書き方サンプルです。 (構文) try{  //例外が発生する ...

スポンサーリンク