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

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサーリンク