Question

我目前正在使用客户端输入框*，它会根据文本输入自动过滤搜索结果;不依赖于服务器端功能，在这种情况下是return / enter键，（只会刷新页面）所以我使用了以下命令禁用它：

<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>

这是最初的目的，但是，在点击return / enter键时，（使用上面的代码）也应该取消选择文本字段，有没有办法实现这个目的？

*来源：http://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html

查看：JSFiddle

编辑：添加小提琴^

Answer 1

在表单上方添加以下脚本

<script>
function enter_detector(e) {
 // if enter key is pressed lose focus
if(e.which==13||e.keyCode==13){
    this.blur();
}
}
//add a listener for input box   document.getElementById('search').addEventListener('keyup',enter_detector,false);

</script>

这是一个片段

<!-- Data generated by Faker, see https://github.com/fzaninotto/Faker -->
<ul class="contacts">
<!-- Add text to the data-index attribute to enable full-text search -->
<!-- Don't forget to lowercase it to make search case-insensitive -->
<li class="searchable" data-index="onabednarschamberger.frank@wuckert.com1-265-479-1196x714">
<dl>
<dt>First Name</dt><dd>Ona</dd>
<dt>Last Name</dt><dd>Bednar</dd>
<dt>Email</dt><dd>schamberger.frank@wuckert.com</dd>
<dt>Phone</dt><dd>1-265-479-1196x714</dd>
</dl>
</li>
<li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">
<dl>
<dt>First Name</dt><dd>Newton</dd>
<dt>Last Name</dt><dd>Cronin</dd>
<dt>Email</dt><dd>torphy.dorothea@gmail.com</dd>
<dt>Phone</dt><dd>(121)644-5577</dd>
</dl>
</li>
<!-- add as much data as you want -->
</ul>

<form onsubmit="return false" class="form-search">
    <input class="input-medium search-query" placeholder="search" id="search" type="text" onKey>
    
</form>
<script>
function enter_detector(e) {
// if enter key is pressed lose focus
if(e.which==13||e.keyCode==13){
	this.blur();
}
}
document.getElementById('search').addEventListener('keyup',enter_detector,false);

</script>
<style id="search_style"></style>
<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
if (!this.value) {
searchStyle.innerHTML = "";
return;
}
// look ma, no indexOf!
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
// beware of css injections!
});
</script>

Answer 2

您是否考虑过使用jQuery＆＃39; onkeypress事件？否则，请使用$(this).blur();取消选择输入

编辑：如果您反对jQuery

，this.blur();同样有效

在返回/回车时取消选择输入框

2 个答案: