Javascript 您如何检测a";的清除;搜索“;HTML5输入?
在HTML5中,Javascript 您如何检测a";的清除;搜索“;HTML5输入?,javascript,jquery,html,events,dom-events,Javascript,Jquery,Html,Events,Dom Events,在HTML5中,search输入类型在右边显示一个小X,它将清除文本框(至少在Chrome中,可能还有其他)。在Javascript或jQuery中,除了检测框何时被点击或执行某种位置点击检测(X-position/y-position)之外,是否有其他方法可以检测X何时被点击?您似乎无法在浏览器中访问它。搜索输入是搜索字段的Webkit HTML包装。取消按钮似乎包含在浏览器客户端代码中,包装器中没有外部引用 资料来源: 看起来您必须通过单击鼠标位置来确定它,如下所示: $('inp
search
输入类型在右边显示一个小X,它将清除文本框(至少在Chrome中,可能还有其他)。在Javascript或jQuery中,除了检测框何时被点击或执行某种位置点击检测(X-position/y-position)之外,是否有其他方法可以检测X何时被点击?您似乎无法在浏览器中访问它。搜索输入是搜索字段的Webkit HTML包装。取消按钮似乎包含在浏览器客户端代码中,包装器中没有外部引用
资料来源:$('input[type=search]').bind('click', function(e) {
var $earch = $(this);
var offset = $earch.offset();
if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
// your code here
}
});
实际上,每当用户搜索时,或当用户单击“x”时,都会触发一个“搜索”事件。这尤其有用,因为它理解“增量”属性
话虽如此,我不确定你是否能区分点击“x”和搜索,除非你使用“onclick”黑客。不管怎样,希望这能有所帮助
参考资料:
根据Pauan的回答,这几乎是可能的。前
<head>
<script type="text/javascript">
function OnSearch(input) {
if(input.value == "") {
alert("You either clicked the X or you searched for nothing.");
}
else {
alert("You searched for " + input.value);
}
}
</script>
</head>
<body>
Please specify the text you want to find and press ENTER!
<input type="search" name="search" onsearch="OnSearch(this)"/>
</body>
函数OnSearch(输入){
如果(input.value==“”){
警报(“您单击了X或未搜索任何内容。”);
}
否则{
警报(“您搜索了”+输入值);
}
}
请指定要查找的文本并按ENTER键!
对我来说,点击X应该算作一个变更事件是有道理的。我已经有了onChange事件的所有设置来完成我需要它做的事情。所以对我来说,修复方法就是简单地执行以下jQuery行:
$('#search').click(function(){ $(this).change(); });
找到这篇文章,我意识到它有点旧,但我想我可能有答案。这将处理单击十字、退格和按ESC键的操作。我相信它可能写得更好——我对javascript还是比较陌生的。下面是我最后要做的事情——我正在使用jQuery(v1.6.4):
绑定
search
-如下所示激活搜索框-
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
我想补充一个“迟来的”答案,因为我今天在change
、keyup
和search
中苦苦挣扎,也许我最后发现的可能对其他人也有用。
基本上,我有一个搜索作为类型面板,我只是想对小X的按下做出正确的反应(在Chrome和Opera下,FF没有实现它),并因此清除一个内容窗格
我有这个密码:
$(some-input).keyup(function() {
// update panel
}
$(some-input).change(function() {
// update panel
}
$(some-input).on("search", function() {
// update panel
}
(它们是分开的,因为我想检查何时以及在何种情况下调用它们)
结果表明,Chrome和Firefox的反应不同。
特别是,Firefox将change
视为“对输入的每一次更改”,而Chrome将其视为“当焦点丢失和内容更改时”。
因此,在Chrome上,“更新面板”功能被调用一次,在FF上为每次击键调用两次(一次在keyup
,一次在change
)
此外,用小X(在FF下不存在)清除字段会触发Chrome下的search
事件:nokeyup
,nochange
结论是什么?使用输入
:
$(some-input).on("input", function() {
// update panel
}
在我测试过的所有浏览器中,它都以相同的行为工作,对输入内容的每次更改都会做出反应(使用鼠标复制粘贴、自动完成和“X”包括在内)。搜索或onclick工作正常。。。但我发现的问题是旧浏览器——搜索失败。许多插件(jQueryUIAutoComplete或fancytree过滤器)都有模糊和聚焦处理程序。将其添加到自动完成输入框对我来说很有用(使用this.value==”,因为它的计算速度更快)。当你点击小“x”时,模糊焦点将光标保持在框中 属性更改和输入适用于IE 10和IE 8以及其他浏览器:
$("#INPUTID").on("propertychange input", function(e) {
if (this.value == "") $(this).blur().focus();
});
对于FancyTree筛选器扩展,您可以使用重置按钮并强制其单击事件,如下所示:
var TheFancyTree = $("#FancyTreeID").fancytree("getTree");
$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
var n,
leavesOnly = false,
match = $(this).val();
// check for the escape key or empty filter
if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
$("button#btnResetSearch").click();
return;
}
n = SiteNavTree.filterNodes(function (node) {
return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
}, leavesOnly);
$("button#btnResetSearch").attr("disabled", false);
$("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();
// handle the reset and check for empty filter field...
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
if ($("input[name=FT_FilterINPUT]").val() != "")
$("input[name=FT_FilterINPUT]").val("");
$("span#SiteNavMatches").text("");
SiteNavTree.clearFilter();
}).attr("disabled", true);
应该能够适应大多数用途。试试这个,希望对您有所帮助
$("input[name=search-mini]").on("search", function() {
//do something for search
});
我相信这是唯一的答案,只有当点击x时才会触发。
然而,这有点老套,格滕伯格的答案对大多数人都适用
$('#search-field').on('click', function(){
$('#search-field').on('search', function(){
if(!this.value){
console.log("clicked x");
// Put code you want to run on clear here
}
});
setTimeout(function() {
$('#search-field').off('search');
}, 1);
});
其中,
“#搜索字段”
是输入的jQuery选择器。使用“输入[类型=搜索]”
选择所有搜索输入。单击字段后立即检查搜索事件(Pauan的答案)。完整解决方案在这里
这将在单击搜索x时清除搜索。
或
当用户按enter键时,将调用搜索api hit。
此代码可通过附加的esc键控事件匹配器进一步扩展。但这一切都应该做到
document.getElementById("userSearch").addEventListener("search",
function(event){
if(event.type === "search"){
if(event.currentTarget.value !== ""){
hitSearchAjax(event.currentTarget.value);
}else {
clearSearchData();
}
}
});
干杯。单击鼠标移动()上的文本字段交叉按钮(X)时,我们可以使用此事件调用任何函数
<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
我知道这是一个老问题,但我一直在寻找类似的问题。确定单击“X”以清除搜索框的时间。这里的答案对我一点帮助都没有。一个是关闭的,但当用户点击“回车”按钮时也会受到影响,它将触发与单击“X”相同的结果 我在另一篇文章中找到了这个答案,它非常适合我,只有当用户清除搜索框时才会触发
$("input").bind("mouseup", function(e){
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function(){
var newValue = $input.val();
if (newValue == ""){
// capture the clear
$input.trigger("cleared");
}
}, 1);
});
基于js的事件循环,点击清除按钮上的
将触发搜索事件,因此以下代码将按预期工作:
input.onclick = function(e){
this._cleared = true
setTimeout(()=>{
this._cleared = false
})
}
input.onsearch = function(e){
if(this._cleared) {
console.log('clear button clicked!')
}
}
上述代码,onclick事件记录了一个this.\u cleared=false
事件循环,但该事件将始终在onsearch
事件之后运行,因此,您可以稳定地检查this.\u清除了状态,以确定用户是否只是单击了X
按钮,然后触发了搜索
input.onclick = function(e){
this._cleared = true
setTimeout(()=>{
this._cleared = false
})
}
input.onsearch = function(e){
if(this._cleared) {
console.log('clear button clicked!')
}
}
document.querySelectorAll('input[type=search]').forEach(function (input) {
input.addEventListener('mouseup', function (e) {
if (input.value.length > 0) {
setTimeout(function () {
if (input.value.length === 0) {
//do reset action here
}
}, 5);
}
});
}
<input
id="searchBar"
class="form-input col-span-4"
type="search"
placeholder="Search..."
@click="clearFilter($event)"
/>
clearFilter: function ($event) {
if (event.target.value !== "") {
setTimeout(function () {
if (document.getElementById("searchBar").value === "")
console.log("Clear button is clicked!");
}, 1);
}
console.log("Search bar is clicked but not the clear button.");
},