onfocusとonblurについて

年齢計算機能にて、フォーカスすると年齢が表示され、フォーカスを外すと年齢が消える機能を作っていますが、フォーカスを外した時の書き方が上手くいかないです。よろしければ、ご教授お願いいたします。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>サンプル</title>
</head>

<body>
  <form id="form">
    <input type="text name=" birthday" id="birthday" value="" onfocus=" myFnc();" onblur="my2Fnc()">
    <p id="age"></p>
  </form>
  <script>
    function myFnc() {
      var birthDay = document.getElementById('form').birthday.value;
      //*現在までの時間*//*
      var d1 = new Date();
      //*生まれた日までの時間*//*
      var d2 = new Date(birthDay);
      //*(現在までの時間）-(生まれた日までの時間)*//*
      var d3 = d1.getTime() - d2.getTime();
      //*日付を出す処理*//*
      var daysPast = Math.floor(d3 / (1000 * 24 * 60 * 60));
      //*年数を出す処理*//*
      var age = Math.floor(daysPast / 365);
      //*document.getElementById('daysPast').innerHTML = daysPast;*//*
      var global_variable = "";
      var str = String(age);
      var result = str.match(/^([1-9]\d*|0)$/);
      if (result != null) {
        document.getElementById('age').innerHTML = age + '歳です';
      }
    }
    function my2Fnc() {
      var birthDay = document.getElementById('form').birthday.value;
      var str = String(age);
      var result = str.match(/^([1-9]\d*|0)$/);
      if (result == null) {
        document.getElementById('age').innerHTML = style = visibility: hidden; age + '歳です';
      }
    }
  </script>
</body>

</html>
コード

行動規範の内容に同意します

回答1件

ベストアンサー

フォーカスを外した時のイベント，onfocusinを用いると良いのではないでしょうか

html
1<input type="text" name="birthday" id="birthday" onfocusin="myFnc()" onfocusout="outFocusFnc()" onblur="my2Fnc()">

js
1function outFocusFnc(){
2  document.getElementById('age').innerHTML = "";
3}

本質問の趣旨からは外れますが，誕生日などの日付を入力させたい場合は，

html
1<input type="date">

を用いるのが一般的かつ簡単だと思います

投稿2020/06/02 07:02

u-sho

総合スコア110

Masaru0217

2020/06/02 07:16

できました。ありがとうございます。調べると、onblurばっかりだったので、これしかないと思っていましたが onfocusinってのがあるんですね。自分でも調べてみます。誕生日だから、そのまま英語でbirthdayだと思っていました。これからはdateに変えます

u-sho

2020/06/02 07:21 編集

onblurイベントはエンターキーを押すことで発火します。 name="birthday"ではなく，type="text" を type="date" にしましょうというお話です

Masaru0217

2020/06/02 07:25

勘違いしてすいません。なるほどです。いつもtype="text"か"textarea"ばっかりで作成していました。そこらへんも気をつけたいと思います。

u-sho

2020/06/02 07:30

究極的にはtextareaで事足りますから，他にあることを知らなければ勘違いなされるのも仕方のないことです。 input タグのtype属性にはtext/textareaだけでなく，入力値に応じて色々と用意されているので，適切に使い分けましょう！ http://www.htmq.com/html5/input.shtml

行動規範の内容に同意します