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] 誕生日から現時点の年齢を求める

誕生日(年月日)から現時点の年齢を求めるサンプルです。 サンプルソース 例)引数に年月日を受け取り年齢を返すFuncti ...

[JavaScript] 要素のidを変更する

JavaScriptで要素のidを変更することができます。 サンプル 例)ボタンを押すとid="aaa"をid="bbb ...

[JavaScript] keydownイベントを取得する(onkeydown)

JavaScriptでkeydownイベントを取得するサンプルです。 サンプルソース 例1)テキストボックス上でキーを押 ...

[JavaScript] replaceAllを実装する

JavaScriptではreplaceメソッドはありますが、replaceAllメソッドはありません。 そこで、repl ...

[JavaScript] フォームリセット時イベントを取得する(onReset)

フォームリセット時イベントを取得するには、onresetイベントハンドラを使用します。 サンプル 例)フォームリセット処 ...

スポンサーリンク