NEW ARTICLE
Google Colaboratory コマンドパレットを開くショートカットキー
  1. HOME
  2. javascript
  3. javascript onblurイベントが発火しない

javascript onblurイベントが発火しない

javascript onblurイベントが発火しない

javascriptで、onblurイベントが発火しない場合の対処法を掲載してます。ブラウザはchromeを使用しています。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.134
Javascript サンプル集はこちら

イベントが発火しない

以下のコードで発生。

<div id="sample"></div>

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
  <input id="sample" type="text" />
</div>

<script>

document.getElementById('sample').onblur = function(){ 
  console.log('onblurが発生しました');
};

</script>

原因

id「sample」が、他のタグでも使用されていため。実際には、大量のHTMLコードの中だったため、気づくのに少し時間がかかりました。

対処法

どちらかの、idを変更する

<div id="rename"></div>

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
  <input id="sample" type="text" />
</div>

<script>

document.getElementById('sample').onblur = function(){ 
  console.log('フォーカスが外れました');
};

</script>