输入框在firefox中不起作用

input box not working in firefox

本文关键字：不起作用 firefox 输入      更新时间：2024-02-23

当有人在输入框中输入一个单词并在点击时隐藏列表项时，我正在尝试使用一个基本的过滤器，这在chrome中运行良好，但在firefox中根本不起作用。

html:

<form ACTION="#" id="navsform" class="my-search">
<input id="formwidth" type="text" name="query" placeholder="Search...">
<input type="submit" class="my-button" value="Search" onclick="query_searchvar()"></form>

javascript:

function query_searchvar()
{
var searchquery=document.navsform.query.value.toLowerCase();
if(searchquery == '')
{alert("No Text Entered");
}
var queryarray = searchquery.split(/,|'s+/);
event.preventDefault();

$('li').each(function() {
  var searchtags = $(this).attr('data-searchtags');
  //alert(searchtags);
  var searcharray = searchtags.split(',');
//alert(searcharray);
var found = false;
for (var i=0; i<searcharray.length; i++)
    if ($.inArray(searcharray[i], queryarray)>-1) {
        found = true;
        break;
    }
if (found == true )
  {
 $(this).show("normal");
  }
else {
$(this).hide("normal");
}
});
}

非常感谢您的帮助。非常感谢。

嗨，我用你所有的评论和一些jquery资源的组合成功地做到了这一点：HTML:

<form id="myform" action="#" class="my-search">
  <input id="formwidth" type="text" name="query" placeholder="Search..." />
  <input class="my-button"  type="submit" value="Search" />
</form>

$('#myform').submit(function() {
var searchquery = String($('#myform input[name=query]').val()).toLowerCase();
  if (searchquery == '') {
  alert('No Text Entered');
  }
var queryarray = searchquery.split(/,|'s+/);
$('li').each(function() {
  var searchtags = $(this).attr('data-searchtags');
  var searcharray = searchtags.split(',');
var found = false;
for (var i = 0; i < searcharray.length; i++)
    if ($.inArray(searcharray[i], queryarray) > -1) {
        found = true;
        break;
    }
if (found == true) {
 $(this).show('normal');
  }
else {
$(this).hide('normal');
}
});
 return false;
});
  1. document.navsform.query.value
  2. onclick="query_searchvar（）"
  3. event.preventDefault？？？--缺少交叉浏览器
  4. 为什么使用点击而不是提交
  5. 缺少返回错误

为什么要使用它？

你已经在使用jQuery了，最好100%使用jQuery？

<form ACTION="#" id="navsform" class="my-search">
<input id="formwidth" type="text" name="query" placeholder="Search...">
<input type="submit" class="my-button" value="Search"></form>

Javascript：

$(document).ready(function(){
$("#navsform").submit(function(event){
event = event||window.event; //Cross
var searchquery=String($("#navsform input[name=query]").val()).toLowerCase();
if(searchquery == ''){
alert("No Text Entered");
}
var queryarray = searchquery.split(/,|'s+/);
event.preventDefault();

$('li').each(function(){
var searchtags = $(this).attr('data-searchtags');
//alert(searchtags);
var searcharray = searchtags.split(',');
//alert(searcharray);
var found = false;
for (var i=0; i<searcharray.length; i++){
if ($.inArray(searcharray[i], queryarray)>-1) {
    found = true;
    break;
}
}
if (found == true ){
$(this).show("normal");
} else {
$(this).hide("normal");
}
});
});
return false;//prevents sending the form, remove if necessary.
});

您应该更改以下几点：

  1. 将事件对象传递给处理程序函数
  2. 将事件处理程序附加到表单提交事件，而不是按钮。这样回车键就可以工作了
  3. 然后你应该使用像萤火虫，蜻蜓或类似的工具。它帮助很大。正如评论中提到的，你可能已经发现了你的错误

请参阅Guilherme Nascimento的回答以获取示例。（但忽略音调..）

相关文章：