在返回/输入时取消选择输入框
Deselect Input Box on Return/Enter
我目前使用的是一个客户端输入框*,它根据文本输入自动过滤搜索结果;由于不依赖于服务器端的功能,在这种情况下是返回/输入键(它只会刷新页面),所以我使用禁用了它
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
这达到了最初的目的,然而,在按下回车键时(使用上面的代码),文本字段也应该被取消选择,有什么方法可以实现吗?
*来源:http://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html
查看:JSFiddle
编辑:添加Fiddle^
在表单上添加以下脚本
<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>
您是否想过使用jQuery的onkeypress
事件?否则,使用$(this).blur();
取消选择输入
编辑:如果您反对jQuery ,this.blur();
同样有效
相关文章:
- HTML使用选择表单更改输入选择(可能使用JQuery?)
- jquery:输入选择器未选择:选择元素
- 使用文件输入选择多个 FIle 时删除单个文件
- 在 AngularJS 中选择输入选择不同的子 JSON 元素
- 带有 Li 的 jquery 输入选择器
- 检查表行的所有输入/选择字段是否都有值
- jQuery 输入选择 - 将中继器内的总计相加
- jQuery 手风琴如何获得输入选择按钮的活动标题.
- 输入-选择下拉菜单在firefox中不起作用
- Angular-基于单选输入选择在ng重复中切换元素类
- 将ID添加到按钮,但必须根据单选输入选择进行更改
- IE9看不到“;文件”;在文件输入选择框中
- 如何在不保存的情况下维护在Web表单上输入/选择的数据
- jQuery过滤器通过文本输入选择选项
- Javascript名称数组输入选择器(name[sometext])
- 我需要做些什么才能让它显示所有的用户输入/选择
- AngularJS输入选择ng模型中的整数值停止工作
- Ruby on rails-使用AJAX更新输入-选择选项
- 在动态生成的HTML中使用CSS布局标签/输入/选择元素的问题
- 动态抓取输入/选择值而不直接瞄准- Javascript