奇怪的输入框bug PC safari答案

【问题标题】：Weird input box bug PC safari奇怪的输入框bug PC safari
【发布时间】：2014-02-27 19:04:04
【问题描述】：

我的 HTML5 游戏中有一个输入框。我想在手机和 PC 上都使用它，所以我同时包含了手机 jquery 和 PC jquery。

<input id="searcher" data-role="none" type="search" placeholder="Search Friends"
                   style="position:absolute; background-color:white; display:block;">

但是，在 PC Safari 上运行时存在错误。当我在输入框中输入文字时，输入框右侧会出现一个叉号。如果我单击十字，则页面的所有其他部分都会停止响应鼠标单击。无论您单击视口的哪个位置，输入框都会获得焦点，就像您单击输入框一样。

我不知道为什么会这样。有没有办法修复这个错误（我认为这是一个事件传播错误）或者只是不显示十字标志？

搜索功能如何工作？我将捕获输入框的“输入”事件，并获取输入框中的字符串。然后将字符串传递给名为 Fuse 的轻量级搜索引擎。 UI会根据搜索结果刷新：

    $("#searcher").on("input", function () {
        var text = $("#searcher").val();
        // If the text is empty, hide the keyboard and blur the search text box.
        if (text === "") $("#searcher").blur().attr("placeholder", "Search Friends");
        // Do a search in middle layer.
        fuseDoSearch(text);
        // Call this function to refresh the UI.
        refreshUI();
    }).focus(function () {
        // When obtaining the focus, remove the place holder string.
        $("#searcher").attr("placeholder", "");
    }).blur(function () {
        // When losing focus, fill the place holder string.
        $("#searcher").attr("placeholder", "Search Friends");
    }).bind(mobile ? "touchstart" : "mousedown", function() {
        // There is a bug in mobile devices that you have to hold the input
        // box for a while to get focus of the input box. So use this to force
        // the input box to get focus when clicked on.
        $("#searcher").focus();
    });

这些是我使用的所有事件监听器。

【问题讨论】：

您的搜索功能是如何工作的？如果它挂在一个空字符串上，那将是你的问题。
有什么代码？输入字段的任何事件监听器？您是否在控制台中遇到任何错误？
@minitech 我已经编辑了问题描述。谢谢！
@Mathias 我已经在编辑的问题描述中回答了你的问题。控制台中没有错误。谢谢！

标签： jquery html inputbox

【解决方案1】：

您的代码有一些冗余； placeholder 不应手动添加和删除。

$("#searcher").on("input", function () {
    var text = $("#searcher").val();
    // If the text is empty, hide the keyboard and blur the search text box.
    if (text === "") return;
    // Do a search in middle layer.
    fuseDoSearch(text);
    // Call this function to refresh the UI.
    refreshUI();
}).on(mobile ? "touchstart" : "mousedown", function() {
    // There is a bug in mobile devices that you have to hold the input
    // box for a while to get focus of the input box. So use this to force
    // the input box to get focus when clicked on.
    $("#searcher").focus();
});

这也应该可以解决您的问题 - return 将阻止搜索继续使用空字符串。我很确定这就是问题所在。

【讨论】：