一、效果:回车按钮变搜索

之前的输入法:

之后的输入法:

二、功能实现

<input type="search" id="search_input" placeholder="请输入" ng-keypress="search($event)"/>

  1、将input的type属性写成search,输入法回车按钮会变成搜索,android有效,ios没变。

  2、给input绑定keypress事件,android可以实现搜索效果,ios每次点击输入法都会触发事件,未达到效果。

  3、识别按键码,当keyCode为13的时候执行搜索代码,android有效,ios有效,pc有效

$scope.search = function(e){
var key_code = window.event?e.keyCode:e.which;
if(key_code==13){
//此处写搜索事件的代码
}
}

三、当我们点击搜索按钮之后,希望软键盘能自动收起来

   可以在搜索事件的代码最后加上一句代码:

document.querySelector("#search_input").blur();

angularjs之手机输入法回车变搜索,并触发事件,兼容pc回车事件的更多相关文章

  1. 移动前端手机输入法自带emoji表情字符处理

    今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有思考过,手机输入法里自带的emoji表情,应该是某些特殊字符.既然是字符,那应该都能提交才对,可是为啥会被卡住呢?搜了一下 ...

  2. 移动APP 中文输入法下的搜索优化

    最近做了一个移动端的搜索功能,带有suggest.实现上并没有什么可说的,但是在后续优化上,特别是在中文输入法的情况下的优化使我学到一些新东西,所以决定写一篇文章. 下面是我简化后的基本功能实现,监听 ...

  3. 【转】移动前端手机输入法自带emoji表情字符处理

    http://blog.csdn.net/binjly/article/details/47321043 今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有思考过,手机输入 ...

  4. baidu手机输入法:邂逅"吹神"的声场漫游

        "十年,好久不见,兄妹,所有还好?年月如歌,你的背包.却仍然没有筛选.装满红玫瑰.人来人往,爱情搬运,纵使我成了K歌之王.也谢谢你.依然让我的全世界失眠. 孤单患者.不如不见,不要说 ...

  5. input输入时软键盘回车显示搜索

    很多时候我们会看到输入法里面回车是搜索等字眼,今天我们就来实现这个效果 原本的效果: <form action=""> <input type="sea ...

  6. Android input输入框 移动页面input手机键盘中的“搜索”按键

    动页面input手机键盘中的“搜索”按键 满足以下几点机即可: input type="search"    放到form标签中    使用action属性 <form ac ...

  7. paip.android 手机输入法制造大法

    paip.android 手机输入法制造大法 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/at ...

  8. 6.表单提交,input键盘变搜索,有关自定义属性input操作

    1.键盘变搜索 1.) 在form 上加action="#", 2.)input type=search, 3.)此时会提交到 #,需要再添加一个input display=non ...

  9. DTcms手机版使用余额支付 提示信息跳转到PC版的错误。以及提交订单不打开新页面

    手机版使用余额支付 提示信息跳转到PC版的错误 引起错误的原因是中间需要提交到DTcms.Web\api\payment\balance\index.aspx去处理 导致BasePage.cs中的li ...

随机推荐

  1. [Angular + TsLint] Disable directive selector tslint error

    @Directive({ // tslint:disable-next-line:directive-selector selector: '[scrollable]' })

  2. openSessionInView的使用原理及性能分析

    看到好多项目中用到了openSessionInView,这种做法无非是开发方便,能够在JSP页面中操作数据库层方面的业务. 下边说下openSessionInView的使用方法及性能问题. 使用: 1 ...

  3. 公布Qt Widgets桌面应用程序的方法

    公布Qt Widgets桌面应用程序的方法 Qt是一款优秀的跨平台开发框架,它能够在桌面.移动平台以及嵌入式平台上执行.眼下Qt 5介绍程序公布的文章帖子比較少.大家又很想要知道怎样公布Qt应用程序, ...

  4. OpenCASCADE点向平面投影

    OpenCASCADE点向平面投影 OpenCASCADE的ProjLib类提供了解析曲线(直线.圆.椭圆.抛物线.双曲线)向解析曲面(平面.圆柱面.圆锥面.球面.圆环面)投影的功能,主要用来计算三维 ...

  5. Effective C++ 条款12

    复制对象时,勿忘其每个成分 作者在本节条款提醒我们,在多重继承的情况下进行copy或者copy assignment 的operator=的编写时,一定要考虑base 类部分数据的初始化后者复制. 对 ...

  6. 转发真阿当老师的一片文章 受益匪浅 (出处:http://cly84920.blog.163.com/blog/static/24750013320158203575958/)

    忽悠程序员做一辈子程序员,以白胡子白头发hacker为目标的人有两种: 1,自己不写程序,但需要有将才为自己打下手的人,这种人往往看他资质和勤奋均平平,却成了你领导.别不服,这种人虽不见得有帅才的能力 ...

  7. hdu_5139 概率问题

    #include<iostream> #include<cstdio> #include<cmath> using namespace std; int main( ...

  8. 大话html5应用与app应用优缺点

    在这个app横飞的年代,对于整个产品研发团队来讲,高速的迭代,爆炸式的功能追加已经成为了互联网行业的时代标签,以小时甚至分钟为单位的进度度量成为了常态.在这个市场大环境下,浪里淘沙的不单单是商业模式. ...

  9. 利用Matlab自带的深度学习工具进行车辆区域检测与车型识别【Github更新!!!】(三)

    前言 对前面的东西更新了一下.地方包括: 1.GUI的更新,更友好的用户界面 2.支持用手直接画车辆区域,并且识别出来 3.将proposal.detect.fine-grained classifi ...

  10. 项目中访问controller报错:HTTP Status 500 - Servlet.init() for servlet spring threw exception

    直接访问controller路径http://localhost:8080/index报错: HTTP Status 500 - Servlet.init() for servlet spring t ...