js回车键事件
js回车键事件
一、总结
一句话总结:
$("#focus").keypress(function(event){if(event.which === 13) { /*点击回车要执行的事件*/ }})
$("#focus")为获取id为focus的元素
$("#focus").keypress(function(event){
if(event.which === 13) {
//点击回车要执行的事件
}
})
1、搜索框回车键事件实例?
$("#focus").keypress(function(event){if(event.which === 13) { /*点击回车要执行的事件*/ }})
return false来阻止后续的事件(Adminlte默认的)
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" data-url="{{url('/search_lesson')}}" class="form-control" id="navbar-search-input" placeholder="找课程">
</div>
</form>
{{--找课程回车键事件--}}
<script>
$(function () {
//$("#focus")为获取id为focus的元素
$("#navbar-search-input").keypress(function(event){
if(event.which === 13) {
//点击回车要执行的事件
let search_content=$('#navbar-search-input').val();
let url=$('#navbar-search-input').data('url');
url=url+'/'+trim(search_content);
window.location.href=url;
//console.log(search_content);
console.log(url);
return false;
}
})
});
</script>
二、js 给元素绑定回车事件
转自或参考:js 给元素绑定回车事件
https://www.cnblogs.com/xiaoshen666/p/10755875.html">js 给元素绑定回车事件
经常会看到登录页面输入完账户密码,回车就登录了.实现方法:
JQuery方法:
$("#focus")为获取id为focus的元素
$("#focus").keypress(function(event){
if(event.which === 13) {
//点击回车要执行的事件
}
})
JS方法:
var focus = document.getElementById("focus");
focus.onkeypress=function(event){
if(event.which === 13) {
//点击回车要执行的事件
}
}
=============================================================================================================
移动端input呼出的键盘,换行(enter)变为搜索
1.首先,input 要放在 form里面。
2. 这时 "换行" 已经变成 “前往”,
3.如果想变成 “搜索”,input 设置 type="search"
=============================================================================================================
移动端开发:使用搜索框时,键盘可以出现"搜索"俩字,并且可以"回车(Enter)"开始搜索......
为了用户体验更好,在用户输入想要检索的内容后,键盘上需要赫然写着“搜索”两个字,并且因为用键盘的习惯问题,当按下“回车(Enter)”时也必须开始搜索,简便快捷。user用了都说好~~~
<form action='' onsubmit="return false;">
<span class="label">关键词:</span>
<input type="search" placeholder="输入您想查询的关键词" id="myInput" /> </form>
这里的form
必须要,并且onsubmit
也必须写,在Enter
的时候才能有反应。
另外,在JS中也要绑定search
事件才行:
$("#myInput").bind("search", function() {
//要执行的方法
});
以上所有,便可以实现键盘上出现 搜索 和 回车(Enter) 有效果。
=============================================================================================================
JS移动端如何监听软键盘回车事件
移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢?
方法很简单,就是在搜索框的input外面套一个form标签 注意点:form标签一定得添加 action属性(可设置为空)
1
|
< form action="">< input type="text" name="search" /></ form > |
移动端软键盘的回车会触发form的submit事件,所以我们只需要监听form的submit事件就可以实现按回车按钮进行搜索的功能
1
2
3
4
|
var oForm = document.getElementsByTagName( "form" )[0]; oForm.onsubmit = function (){ $scope.searchOrder(); }; |
题外话:我拿的ipad进行的测试 当input框外面套上form标签 并给form标签添加action属性后 软键盘上的return 会变成蓝色的Search.
三、回车键事件实例
监听回车事件(搜索框)
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" data-url="{{url('/search_lesson')}}" class="form-control" id="navbar-search-input" placeholder="找课程">
</div>
</form>
{{--找课程回车键事件--}}
<script>
$(function () {
//$("#focus")为获取id为focus的元素
$("#navbar-search-input").keypress(function(event){
if(event.which === 13) {
//点击回车要执行的事件
let search_content=$('#navbar-search-input').val();
let url=$('#navbar-search-input').data('url');
url=url+'/'+trim(search_content);
window.location.href=url;
//console.log(search_content);
console.log(url);
return false;
}
})
});
</script>
四、js中回车触发事件
转自或参考:js中回车触发事件
https://www.cnblogs.com/xulz/p/9208615.html
document.onkeydown = function (e) { // 回车提交表单
// 兼容FF和IE和Opera
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
queryInfo();
}
}
JS监听某个DIV区域
$("#queryTable").bind("keydown",function(e){
// 兼容FF和IE和Opera
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
//回车执行查询
$("#queryButton").click();
}
});
JS监听某个输入框
//回车事件绑定
$('#search_input').bind('keyup', function(event) {
if (event.keyCode == "13") {
//回车执行查询
$('#search_button').click();
}
});
js回车键事件的更多相关文章
- js 回车键事件
document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arg ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- 在页面使用js回车键
网上有大量的文章关于 js回车事件的,但是只有适合自己的才是最好的. 第一种: // submit closest form $(".keydown_submit").keydow ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
随机推荐
- shell 大型脚本工具开发实战
拆分脚本功能,抽象函数 1.function get_all_group 返回进程组列表字符串 2.function get_all_process 返回进程名列表字符串"nginx htt ...
- Swagger 接口文档规范
导语: 相信无论是前端还是后端开发,都或多或少地被接口文档折磨过.前端经常抱怨后端给的接口文档与实际情况不一致.后端又觉得编写及维护接口文档会耗费不少精力,经常来不及更新.其实无论是前端调用后端,还是 ...
- 十三、细说NULL导致的神坑,让人防不胜防
当数据的值为NULL的时候,可能出现各种意想不到的效果,让人防不胜防,我们来看看NULL导致的各种神坑,如何避免? 一.比较运算符中使用NULL 任何值和NULL使用运算符(>.<.> ...
- Elasticsearch vs Solr 搜索引擎对比和选型
前言 全文搜索属于最常见的需求,开源的 Elasticsearch 是目前全文搜索引擎的首选. 基于Lucene它可以快速地储存.搜索和分析海量数据.维基百科.Stack Overflow.Githu ...
- Tornado框架 源码基本分析
在python2 的环境中 pip install tornado==1.2.1 1.2.1版本Tornado源码少,利于了解. import tornado.ioloop import tornad ...
- CISCO设备配置SSH 登陆
1. 设置设备域名CISCO ip domain name CISCO2.创建密钥Server(config)#crypto key generate rsa The name for the key ...
- 科大讯飞语音识别Demo创建
1.下载官方SDK https://www.xfyun.cn/sdk/dispatcher 2.打开AS,选择import project 3.导入mscV5PlusDemo 4.解决ERROR: ...
- springboot中用来进行查看错误日志的logback文件
<?xml version="1.0" encoding="UTF-8"?> <!-- 从高到地低 OFF . FATAL . ERROR . ...
- python基础--切片、迭代、列表生成式
原文地址:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143175684 ...
- docker常用命令以及搭建
1. 进入容器中 docker exec -it <容器的名字> /bin/bash 2. 查看镜像 docker images 3. 查看所有容器 docker ps -a 4. 运行容 ...