javascript - 输入字段在输入后不可编辑

Question

我有一个像这样的简单输入字段:

<input type="edit" name="search" placeholder="Start Searching..." id="sb">

在我不得不输入一些 JavaScript 来让它执行某些操作之前，它在测试时运行良好。现在它可以工作了，但是在输入了一段时间后它失去了焦点，我无法点击返回它。

我拥有的 JavaScript 会检测输入字段中的文本何时发生变化，以及何时发生变化。使用这个 How to detect a textbox's content has changed

jQuery('#sb').on('input propertychange paste', function() {
    // do your stuff
});

此 JavaScript 将一堆元素呈现到搜索栏正下方的页面。

Answer 1

This JavaScript renders a bunch of elements to the page directly below the search bar.

这是关键；一旦我输入这个，我就知道发生了什么。

如白色矩形所示，这是与搜索栏重叠的区域。这是保存由 JavaScript 呈现的内容的 div。我能够在渲染之前输入它，因为它不存在，之后我无法输入它，因为渲染的东西“在它之上”。所以我只需要添加快速的 CSS 行就可以解决问题。

#sb { z-index: 0; }
#results { z-index: -999; }

其中 #sb 是输入字段的 ID，#results 是我的 JavaScript 呈现的它下面的 div 的 ID。