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.
js 给元素绑定回车事件的更多相关文章
- google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决
Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...
- js登录页面的 回车事件
js登录页面的 回车事件 js登录页面的 回车事件(2012-12-26 10:37:03)转载▼标签: jseventkey回车事件登录 分类: js.jquery //回车事件 第一种docum ...
- JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...
- 查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
- Visual Event插件----查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
- jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件
很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...
- 查看html元素绑定的事件与方法 visual Event 插件
WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
- 关于动态添加的html元素绑定的事件不生效的解决办法
1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...
- vue:element-ui输入框绑定回车事件
参考: https://segmentfault.com/q/1010000011347642 https://weiku.co/article/297/ vue监听input输入框的回车事件:key ...
随机推荐
- QT版本下载链接
http://download.qt.io/archive/qt/
- PCQQ - 发送自定义的XML卡片消息
效果: 原理: qq分享产生的xml卡片消息存储在qq内存中,可以在qq运行内存中搜索找到其xml源码,记录源码相应的内存地址,通过内存地址修改掉内存数据,再次转发这条分享的消息就会发现内容的变化. ...
- 【JAVA各版本特性】JAVA 1.0 - JAVA 12
make JDK Version 1.01996-01-23 Oak(橡树) 初代版本,伟大的一个里程碑,但是是纯解释运行,使用外挂JIT,性能比较差,运行速度慢. JDK Version 1.119 ...
- 【Day3】3.提取商城分类结构
import re with open('index.html','r',encoding='utf-8') as f: html = re.sub('\n','',f.read()) section ...
- Linux内核移植主要过程
- 将TensorFlow训练好的模型迁移到Android APP上(TensorFlowLite)
转自:https://blog.csdn.net/u012328159/article/details/81101074 https://blog.csdn.net/masa_fish/article ...
- 地沟油jiance
与地沟油较劲九年(我和我的祖国) 任 飞 2019年06月13日05:00 来源:人民网-人民日报 分享到: 地沟油中含有多种有毒有害物质,但地沟油的检测却是一大难题.单靠眼睛谁也无法判断 ...
- java--mybatis的实现原理
动态代理? 需要调试下,看下源码,再研究下……
- F - Star SPOJ - STARSBC
Fernando won a compass for his birthday, and now his favorite hobby is drawing stars: first, he marks ...
- PAT乙级1039
题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805283241443328 题解 用两个字符串表示两个箱子,一 ...