经常会看到登录页面输入完账户密码,回车就登录了.实现方法:

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 给元素绑定回车事件的更多相关文章

  1. google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...

  2. js登录页面的 回车事件

    js登录页面的 回车事件 js登录页面的 回车事件(2012-12-26 10:37:03)转载▼标签: jseventkey回车事件登录 分类: js.jquery  //回车事件 第一种docum ...

  3. JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

    日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...

  4. 查看html元素绑定的事件与方法的利器

    WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

  5. Visual Event插件----查看html元素绑定的事件与方法的利器

    WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

  6. jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

    很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...

  7. 查看html元素绑定的事件与方法 visual Event 插件

    WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

  8. 关于动态添加的html元素绑定的事件不生效的解决办法

    1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...

  9. vue:element-ui输入框绑定回车事件

    参考: https://segmentfault.com/q/1010000011347642 https://weiku.co/article/297/ vue监听input输入框的回车事件:key ...

随机推荐

  1. Socket的神秘面纱

    Tcp/IP协议是目前世界上使用最为广泛的协议,是以Tcp/IP为基础多个层次上的协议的集合.也称Tcp/IP协议族或Tcp/IP协议栈. TCP: Transmission Control Prot ...

  2. css优先级及其对应的权重

    1.选择器的优先级 !important>内联选择器(style)>id选择器>类选择器 | 属性选择器 | 伪类选择器 > 元素选择器>通配符(*) 2.选择器的权重( ...

  3. Spring cloud实战——服务提供者

    目录讲解: 一.服务提供者与服务消费者的概念 二.编写一个服务提供者的测试类(code) 1.1. 使用微服务构建的是分布式系统,微服务之间通过网络进行通信.我们使用微服务提供者与服务消费者来描述微服 ...

  4. idea配置代码注释模板

    从eclipse换成idea后,有点不习惯,其中之一就是代码注释,感觉不如eclipse好用,下面是一些配置方法,配完之后差不多能实现eclipse的效果. 1.以配置Class的注释为例,其他文件的 ...

  5. 五:MVC使用数据库优先(DatabaseFirst)的方式创建数据模型

    1. ORM概念 2. EF的DatabaseFirst模式使用 1. ORM简介 对象关系映射(Object Relational Mapping,简称ORM) ORM技术特点: 1.提高了开发效率 ...

  6. Android基础相关面试问题-activity面试问题(生命周期,任务栈,启动模式,跳转协议,启动流程)

    关于Android的一些面试题在15年就已经开了这个专栏了,但是一直木有坚持收集,而每次面对想要跳槽时大脑一片空白,也有些恐惧,因为毕境面试都是纯技术的沟通,要想让公司对你的技术能有所认可会全方位的进 ...

  7. Java&Selenium 鼠标键盘及滚动条控制相关方法封装

    一.摘要 本片博文主要展示在使用Selenium with java做web自动化时,一些不得不模拟鼠标操作.模拟键盘操作和控制滚动条的java代码 二.模拟鼠标操作 package util; im ...

  8. 0912 for循环及内置方法

    目录 for 循环 1.循环 2.循环取值 3.range 4.for + break 5.for+continue 6.for + else 数字类型内置方法 整型 浮点型 字符串 1.作用 2.作 ...

  9. [转载]pytest学习笔记

    pytest学习笔记(三)   接着上一篇的内容,这里主要讲下参数化,pytest很好的支持了测试函数中变量的参数化 一.pytest的参数化 1.通过命令行来实现参数化 文档中给了一个简单的例子, ...

  10. 使用 Live CD 修复 Ubuntu GRUB

    用 Ubuntu 的 Live CD 试用 Ubuntu 启动后,打开终端 假如你的Ubuntu的 / 分区是sdc1,又假如 /boot 分区是 sdc1,在终端下输入 sudo -i mount ...