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] JavaScriptが使えない環境でメッセージを表示する

JavaScript禁止にしているブラウザの場合にメッセージを表示するにはnoscriptタグを使用します。 サンプルソ ...

[JavaScript] ページを離れる直前に処理を行う(onBeforeUnload)

ページを離れる直前に処理を行うには、onBeforeUnloadイベントハンドラを使用します。 サンプルソース 例)ペー ...

[JavaScript] サイト内の文字を選択できないようにする

サイト上の文字(文章)をドラッグ等で選択できないようにするには、 onselectstartを使用すれば実現できます。 ...

[JavaScript] 画像オブジェクトを取得する

画像オブジェクトを取得する方法です。 サンプルソース 例)画像(id="neko")オブジェクトを取得する [crayo ...

[JavaScript] Javaが使えるかどうか判定する(navigator.javaEnabled())

Javaが使えるかどうか判定するには、navigator.javaEnabled() を使用します。 サンプルソース 例 ...

スポンサーリンク