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] 条件がfalseの場合のみコンソールに出力する(console.assert)

条件がfalseの場合のみコンソールに出力するには、console.assertを使用します。 サンプルソース 例)co ...

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

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

[JavaScript] アラートを表示する(window.alert)

アラートを表示するには、window.alert()を使用します。 サンプルソース 例)アラートを表示する [crayo ...

[JavaScript] 要素の集合体をを配列として取得する(Array.from)

要素の集合体をを配列として取得するには、Array.fromを使用します。 サンプルソース 例)"c1"クラスを持つ要素 ...

[JavaScript] 文字列からFunctionを生成する

文字列からFunctionを生成するサンプルです。 サンプルソース 例)文字列からFunctionを生成して実行するサン ...

スポンサーリンク