Onclick选择然后关闭

Question

当用户点击文本字段时，我正在使用基本代码突出显示文本：

<input type="text" id="search_for" name="searchTerm" onclick="this.select()">

哪个好，但您只能选择删除，这意味着您无法实际点击所选文本的中间，以便在其中已有的字词/字符中间添加内容。

场景...如果用户搜索“红色汽车”，他们应该能够点击框中的高亮显示，所以点击删除并搜索“蓝色汽车”。或者，他们可能想要点击输入并将搜索更改为“大红色汽车”。

是否可以单击然后再次单击取消设置突出显示？或者我可以使用其他什么方法？

或者我应该在页面加载时选择字段，然后单击取消选择？这甚至可能吗？

我已经广泛搜索了这个但是还没有运气。

Answer 1

您可以跟踪输入中的点击次数，并基本上切换select()与focus()。它可能不完全是你所指的，但它是你可以做的。

的 See working jsFiddle demo. 的

HTML：

<input type="text" 
       id="search_for" 
       name="searchTerm" 
       onclick="searchForClick(this);" 
       value="text text text text" />​

的JavaScript：

searchForClickCount = 0;

function searchForClick(el) {

    if (searchForClickCount === 0) {
        el.select();
        searchForClickCount++;
    } else if (searchForClickCount >= 0) {
        el.focus();
        searchForClickCount = 0;
    }

}​