在 html 中搜索 javascript 不起作用

Question

我想在 tpl 文件的站点标题中显示搜索

<div  class="search-widget" >
<form method="get" action="art/search">
<input type="text"  id="artnum" value="" maxlength="40" placeholder="" > 

<button type="submit"  onclick="TDMArtSearch()">
<i class="material-icons search">&#xE8B6;</i>
<span class="hidden-xl-down"></span>
</button>
</form>
<div class="tclear"></div>
<script type="text/javascript">
function TDMArtSearch(){
var art = $('#artnum').val();
if(art!=''){
art = art.replace(/[^a-zA-Z0-9.-]+/g, '');
location = '/art/search/'+art+'/';
}
}
$('#artnum').keypress(function (e){
if(e.which == 13){ TDMArtSearch(); return false;}
});
</script
></button>
</form>
</div>

搜索不起作用。如果我删除form method="get" action="art/search".然后搜索工作。仅当您单击搜索按钮时才有效。如何应用form method以开始使用回车键进行搜索

Answer 1

只需使表单在提交时执行javascript函数：

<div  class="search-widget" >
<form method="get" action="art/search" onsubmit="TDMArtSearch(); return false;">
<input type="text"  id="artnum" value="" maxlength="40" placeholder="" > 
<button type="submit"  onclick="TDMArtSearch()">
<i class="material-icons search">&#xE8B6;</i>
<span class="hidden-xl-down"></span>
</button>
</form>
<div class="tclear"></div>
<script type="text/javascript">
function TDMArtSearch(){
var art = $('#artnum').val();
if(art!=''){
art = art.replace(/[^a-zA-Z0-9.-]+/g, '');
location = '/art/search/'+art+'/';
}
}
</script
></button>
</form>
</div>

onsubmit属性是在提交表单时执行javascript，返回false是停止"正常"提交。通过添加侦听器和使用更干净的 HTML 代码有更好的方法来做到这一点，但是一旦你知道它是如何工作的，你就可以寻找它。