奇怪的输入框错误PC safari

我的HTML5游戏中有一个输入框。我想在移动设备和PC上使用它，所以我同时包含了移动jquery和PC jquery。奇怪的输入框错误PC safari

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

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

我不知道为什么会发生这种情况。有没有办法解决这个错误（我认为这是一个事件传播错误），或者只是不显示交叉符号？

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

$("#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(); 
    });

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

来源

2014-02-27 darklord

您的搜索功能是如何工作的？如果它挂在空字符串上，那就是你的问题。 – Ryan

什么代码有？输入字段的任何EventListeners？在控制台中是否有任何错误？ – Mathias

@minitech我编辑了问题描述。谢谢！ – darklord

你的代码有点冗余;不应手动添加和删除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将停止从一个空字符串继续搜索。我很确定这就是破坏事情。

来源

2014-02-27 22:33:28 Ryan

奇怪的输入框错误PC safari

回答

相关问题