setIntervalとinnerHTMLの併用でフォーカスがはずれる

setinterval-innerhtml-focus-blur.02

併用でフォーカスがはずれる

setTimeoutとinnerHTMLを併用すると挿入する場所によっては同じ位置にあるinputタグなどのフォーカスがはずれることがある。

たとえば下記のコードのようにinputと同じ位置（兄弟関係）にinnerHTMLで挿入されるとフォーカスがはずれる。

<div id="c">
  <input type="text" value="フォーカスがはずれる">
</div>

setInterval(function() {
  var c = document.getElementById("c");
  c.innerHTML += 'TEST!';
}, 2000);

最近はカルーセル（画像が右から左に移動して次々に表示されるやつ）でsetTimeoutとinnerHTMLを併用しているケースが多く、意図せずにフォーカスをはずしてしまうことがあるので注意が必要だ。

※setTimeoutとinnerHTMLを併用するとと書いたが再帰処理のsetTimeoutとappendChildなどを使用したものでも同様の問題が発生する。

この問題を解決するには挿入する場所をdivなどで区切るなどして同じタグ内の同じ位置に挿入しないようにする。