Question

我有一个文本字段，可以在用户输入div时更新div的内容。我在小屏幕上的用户有时会滚过div，并且只有屏幕上的输入。所以他们没有意识到他们的打字正在做点什么。

因此，我编写了您在下面看到的Javascript函数，以便同时在屏幕上保留这两个元素。输入中的onfocus事件会向上滚动浏览器窗口以显示div。

但这导致输入失去焦点。所以，我在函数中添加了this.focus()。它将焦点返回到输入。

但是这个事件再次触发了这个函数，创建了一个超出最大调用堆栈大小的无限循环。

我如何解决这个问题，以确保两个元素同时出现在屏幕上，并且不会在输入中失去焦点，并避免无限循环？

(function() {

  document.getElementById('edit_here').onkeyup = function(){
      var result = document.getElementById('edit_here').value;
      document.getElementById('result_here').innerHTML = result;
  }


  document.getElementById('edit_here').onfocus = function(){
    location.href = '#result_here';
    this.focus();
  }

}());

<div id="result_here">Result</div>
<div>Scroll down until this is not visible. Then type in the field.</div>
<input id="edit_here" type="text" />
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>

Answer 1

我认为您已经验证该元素是否已集中。如果它是焦点，你不需要var regex = /^A{8,}={0,2}$/ console.log([ // Trash (true) 'AAAAAAAA', 'AAAAAAAA=', 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==', 'AAAAAAAAAAAAA=', // Keep (false) 'AAAAA', 'AAAAA=', 'AAAAA0AAAAAAAAAAAAAAAAAAAAAAAAAAA', '==' ].map(regex.test, regex))。所以：

this.focus

Onfocus Scroll to Anchor =失去焦点。恢复焦点=无限循环

1 个答案: