键入后输入字段不可编辑

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

  

此JavaScript会将一大堆元素呈现在搜索栏正下方的页面中。

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

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

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

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