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

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

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] イベント処理を中断する(.preventDefault)

イベント処理を中断するには、.preventDefault()を使用します。 サンプルソース 例)テキストボックスでbキ ...

[JavaScript] 半角は1文字、全角は2文字として文字数をカウントする

半角文字は1文字、全角文字は2文字として文字数をカウントするサンプルです。 サンプルソース 例)半角文字は1文字、全角文 ...

[JavaScript] 配列の重複データのみ抽出する

配列の重複データのみ抽出するサンプルです。 サンプルソース 例)配列「arr1」から重複要素のみを抽出した配列を取得する ...

[JavaScript] HTMLタグに独自属性を設定する(dataset)

HTMLタグに独自の属性を設定したい場合は、datasetという仕組みを使用します。 カスタムデータ属性とも呼ばれます ...

[JavaScript] 文字列をBase64エンコードする(.btoa)

文字列をBase64エンコードには、window.btoa()を使用します。 サンプルソース 例)文字列「abcdefg ...

スポンサーリンク