Question

我的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();
    });

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

Answer 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将阻止搜索继续使用空字符串。我很确定这就是破坏的东西。

怪异的输入框bug PC safari

1 个答案: