【HTML】入力後に関数を発火させる onblur属性

こんにちは

今日はinputやtextareaによく使える属性 blur を紹介していきたいとおもいます。

onblur 属性 とは！！！

ユーザーがクリックしたときやtabで選択されたとき
その要素はフォーカスを受け取ります。

blurはフォーカスを失ったときに受け取る属性です。

onclick のようにインラインで記述することができ

<input type="text" onblur="example()">

と書いて関数を呼び出します。

またはjqueryで書いたり。

$('input').blur(example);
 
 　function example() {
  
    　console.log('blur!!!');
  
　}

inputの中身が空白だとアラートを呼び出すフォームを作ってみました。

<div class="form">
<p>onblurを使って、入力した後にバリテーションをかける</p>

<div>
  <p　class="text"></p>
  <p>名前：<input type="text" onblur="check(this)"></p>
  <p>住所：<input type="text" onblur="check(this)"></p>
  <div>内容：<textarea></textarea></div>
</div>

<p>インライン要素でthisも使えるのですね。知らなかった</p>
</div>
<script>

// 空白だとアラートを実行する
function check(obj){
  console.log(obj)
  if(!obj.value){
    alert("入力してください")
    obj.style.backgroundColor='lightpink';
  }else{
    obj.style.backgroundColor='white';
  }
}  

</script>

See the Pen blog - onblur を使ってみる by たまき こう (@ulqvhvox) on CodePen.

おしまい