如何在单击链接时清除输入元素

How to clear an input element when clicking on a link?

本文关键字：清除 输入 元素 链接 单击      更新时间：2023-09-26

我有一个搜索过滤器输入，它有效：

<form id="filter-form" action="">
      <p>Search table: <input name="filter"  id="filter" value="" maxlength="30" size="30" type="text"></p>
</form>

在我拥有的侧边栏中，我单击一个链接以将表格更改为全部或测试。当我单击它时，它确实会更改表格并且正在清除输入，但是当"测试"表出现时，我上次输入的过滤器（文本）仍然适用。

如何让它清除过滤器并且上次不输入文本？

<ul>
<li><a id="all" href="#1"   onclick="changeClass('all')">All</a></li>
<li><a id="test" href="#2"  onclick="changeClass('test');" >2</a></li>
</ul>
<script type="text/javascript">
    function changeClass(x){
        if(x=="all"){           
            $("#t01").hide();
            $("#t02").show();
document.getElementById("filter").value="";         
        }
        else if(x == "corporate"){          
            $("#t01").show();
            $("#t02").hide();
            document.getElementById("filter").value="";
    }
</script>

如果我答对了问题，您可以使用点击处理程序：

$("#all, #test").on('click', function() {
  $("#filter").val('');
});

编辑：这是一个JSFiddle可能会有所帮助。 这里有两个单击处理程序，每个单击<a>元素一个。

希望这有所帮助。使用jQuery.toggle稍微简化了您的函数，并使用.val('')清除了输入字段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="filter-form" action="">
      <p>Search table: <input name="filter" id="filter" value="" maxlength="30" size="30" type="text"></p>
</form>
    
<ul>
    <li><a id="all" href="#1"   onclick="changeClass('all')">All</a></li>
    <li><a id="test" href="#2"  onclick="changeClass('test');">2</a></li>
</ul>
<script>
    function changeClass(x){
        $('#t01').toggle(x != 'all');
        $('#t02').toggle(x == 'all');
        $('#filter').val('');
    }
</script>

不过，Alex 正在以最好的方式做到这一点，使用 jQuery 来附加点击处理程序而不是内联。

相关文章：