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] テキストボックスにフォーカスを当てた時に全選択状態にする

テキストボックスにフォーカスを当てた時に全選択状態にするには、select()を使用します。 サンプル 例)フォーカスを ...

[JavaScript] 絶対指定でページをスクロールする(window.scrollTo)

JavaScriptで指定位置までページを移動させるには、window.scrollToを使用します。 構文 (wind ...

[JavaScript] べき乗を求める(Math.pow)

べき乗を求めるには、Math.pow()を使用します。 構文 (aのb乗を求めてxに代入する) var x = Math ...

[JavaScript] ページに文字列を出力する(document.write、document.writeln)

JavaScriptからページに文字列を出力するには、 document.write、document.writelnを ...

[JavaScript] sleep処理を行う

JavaScriptには標準でsleep関数が無いので、sleep処理を行いたい場合は自作する必要があります。 サンプル ...

スポンサーリンク