【问题标题】：<input type="text" lose focus after 1'st key press in chrome<input type="text" 在 chrome 中第一次按键后失去焦点
【发布时间】：2019-05-13 21:31:01
【问题描述】：

我有一个文本框，由 jquery “观察”几个动作，所有代码都是“搜索即输入”表单的一部分。好吧，一切都在 Mozilla 上完美运行，但在 Chrome 中，文本框在第一次点击后失去焦点，所以我必须再次点击文本框才能继续搜索。有什么线索吗？我的经验导致我遇到错误

<div class="search-container">
    <input type="text" placeholder="Search.." name="searchb" >
</div>

<script>    
$('input[name="searchb"]').on('input propertychange 
paste',function(){

if ($(this).val().length > 2){
    document.cookie = "psearch="+this.value+";"+"path=/";
    window.open("main.php?psearch="+this.value, "iframe_a");
    }
    });
</script>

【问题讨论】：

你为什么要window.open()？
只有当if ($(this).val().length > 2)条件为真时才会出现这种情况吗？
此代码在 Chrome 和 Firefox 中都适用于我。如果只注释掉这个事件监听器，输入在 1 次击键后是否仍然失去焦点？
@Patrick Q，因为我必须在某处发布结果，除了在框架中打开页面之外，我没有其他方法可以做到这一点，我可以尝试使用 div 刷新，但仍然无法计算最好的做法，但我最终可能会遇到同样的问题。
@kingunits 对 ajax 做一些研究。这就是你想要的。

标签： php jquery html

【解决方案1】：

您的搜索输入正在失去焦点，因为新打开的窗口将获得焦点。

此外，使用您当前的代码，每次检测到长度超过两个字符的输入时都会打开一个新窗口。

有很多解决方案，这里有两个。我没有将它们放入代码 sn-ps 中，因为它们无法正常工作。

AJAX

通过 AJAX 请求，您可以获得main.php 生成的 HTML：

HTML

<div class="search-container">
    <input type="text" placeholder="Search.." name="searchb" >
</div>

<div id="searchb-result"></div>

Javascript

$('input[name="searchb"]').on('input propertychange paste', function() {
    // Empties the result container.
    $('#searchb-result').empty();

    if ($(this).val().length > 2) {
        document.cookie = `psearch=${this.value};path=/`;

        // Gets the HTML by AJAX and adds it to the result container.
        $.get('main.php', `psearch=${this.value}`, (html) => {
            $('#searchb-result').html(html);
        });
    }
});

`<iframe>`

您可以在<iframe> 标记中加载您的网址。

HTML

<div class="search-container">
    <input type="text" placeholder="Search.." name="searchb" >
</div>

<iframe style="display:none;"></iframe>

Javascript

$('input[name="searchb"]').on('input propertychange paste', function() {
    // Hides the <iframe> by default.
    $('iframe').hide();

    if ($(this).val().length > 2) {
        document.cookie = `psearch=${this.value};path=/`;

        // Updates the <iframe> source when an input is detected.
        $('iframe')
            .attr('src', `main.php?psearch=${this.value}`)
            .show();
    }
});

【讨论】：

【解决方案2】：

我在没有 jquery 的情况下重写了整个部分，干净并且有点 4 年级的方法，但它有效。问题是注意力不集中。

<div class="search-container">
      <input type="text" placeholder="Search.." name="searchb" id="search" autofocus="autofocus">
</div>

<script>
window.name = 'parent';

search.onchange = search.oninput = search.onpaste = function() {
        var sv = search.value;
    if (sv.length > 3){
        var search_window = window.open("main.php?psearch="+sv, "iframe_a");
        parent.focus();
        }
    else {
        document.cookie = "psearch=";"path=/";
        var search_window = window.open("main.php?psearch=", "iframe_a");
        parent.focus();
    }

}
</script>

【讨论】：

AJAX

&lt;iframe&gt;

`<iframe>`