JavaScript

[JavaScript] 日付スラッシュ編集を行うテキストボックス

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

フォーカスインすると「YYYYMMDD」形式、フォーカスアウトすると「YYYY/MM/DD」形式にするテキストボックスサンプルです。

日付スラッシュ編集を行うテキストボックス

例)focusInでスラッシュ編集を解除、focusOutでスラッシュ編集を行う

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

実行サンプル

フォーカスインでスラッシュ編集解除、フォーカスアウトでスラッシュ編集を行います。

解説

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

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

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

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

補足

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

スポンサーリンク

スポンサーリンク

-JavaScript
-, ,

執筆者:


  1. sample より:

    「Infinity」と入力すれば数値でなくともスラッシュ編集されるようになっていますよ。

    • とら より:

      ご指摘ありがとうございます。
      「Infinity」は盲点でした。
      数値8桁チェックは正規表現で行うように修正しました。

      (修正前)
      if((obj.value).trim().length == 8 && !isNaN(obj.value)){ ~

      (修正後)
      if(new RegExp(/^[0-9]{8}$/).test(obj.value)){ ~

comment

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

関連記事

[JavaScript] name名からオブジェクトを取得する

タグに付けられたname名からオブジェクトを取得するには、 document.getElementsByNameを使用し ...

[JavaScript] 数値をカンマ区切り文字列にする

数値をカンマ区切り文字列にするサンプルです。 数値をカンマ区切り文字列にするサンプル集 例1)1234567をカンマ区切 ...

[JavaScript] 配列の要素を比較する

配列の要素が同じかどうか比較する方法です。 配列をそのまま「==」などで比較すると、参照の比較となるためうまく比較できま ...

[JavaScript] セレクトボックスの選択中のvalue値を取得する

セレクトボックスの選択中のvalue値を取得するサンプルです。 サンプルソース 例)ボタンを押すと、セレクトボックスで選 ...

[JavaScript] 文字列をJavaScriptコードとして評価する

文字列をJavaScriptコードとして評価するにはevalを使用します。 サンプル 例)文字列をJavaScriptコ ...

スポンサーリンク