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

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

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] 2つの日付の差を日数で求める

2つの日付の差を日数で求めるサンプルです。 サンプル 例)2016年1月1日~2016年6月30日の日数を求める [cr ...

[JavaScript] 三角関数を使用する

JavaScriptで三角関数を使用するサンプルです。 サンプル 例)30度のサイン(正弦)を求める [crayon-5 ...

[JavaScript] replaceAllを実装する

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

[JavaScript] オブジェクトが配列かどうか判定する

オブジェクトが配列かどうか判定するサンプルです。 サンプル instanceofを使う方法と、Array.isArray ...

[JavaScript] cookieが有効かどうか調べる

JavaScriptでcookieが有効かどうか判定するには、 navigator.cookieEnabledを使用しま ...

スポンサーリンク