满足以下几点机即可:

input type="search"

放到form标签中
使用action属性

<form action="." ><input type='search' />
</form>

注意:

如果只使用input type="search",而不放到form标签中,则显示“换行”;
如果放到form中,但是使用type="text",则显示“前往”;
如果放到form中,使用input type="search",但没有action属性,Android不会有问题,但在IOS8以上的系统中,键盘上仍不会显示“搜索”,而是显示“换行”。

回车事件

如果页面中不设置“搜索”按钮来触发搜索操作,而是当点击键盘中的“搜索”时就进行搜索操作。可以监听输入框的回车事件。比如在onKeyDown事件监听中,获取事件keyCode,判断是否输入“回车”(keyCode=13),然后再进行相关的搜索操作。

点击搜索之后页面自动刷新的问题

因为这个form中只有一个输入框,所以在输入框中输入回车时,页面会自动刷新。要避免此情况,可以在添加一个隐藏的input

<form action="." ><input id="iptSearch" type='search' /><input type="text" style="display:none;"/>
</form>

输入框内的小叉X

type=“search”的输入框在获取到焦点后,默认会出现一个小叉叉,用于清空输入框中的内容,而且样式因浏览器而异。如果想要隐藏这个X,可以使用如下CSS:

input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;
}

移动端 h5 界面软键盘搜索功能实现

解决方法: 对应移动端按键响应事件onkeypress(或者keyup) 按键编码为13

 document.onkeyup = function (e) {var code = e.charCode || e.keyCode;if (code == 13) {that.search();}}

js判断单击软键盘的“完成”按钮

方法一、模拟表单提交,

input外面包上一个form标签,当用户在表单中单击搜索或完成会触发表单的submit事件,所以在submit事件中去处理搜索的逻辑,并阻止表单的提交

html

<form action="" id="form"> <input type="text"> </form>

js

$('#form').submit(function(){ // 处理相关逻辑 return false; })

方法二、用keypress事件

最让我喜出望外的是,移动端的软键盘也是支持keypress、keydown、keyup事件的,这样实现起来就更加简单了,完成的event.keyCode是13,和键盘上的回车键一样,
代码

<input type="text" id ="txt">
$("#txt").keypress(function(e){ if(e.keyCode === 13) { // 处理相关逻辑 } })

推荐使用方法二

常用的手机浏览器都是兼容的,但不敢保证所有的都是兼容,万一有个***呢

移动页面input手机键盘中的“搜索”按键相关推荐

  1. 在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

    在浏览器端调试代码并直接修改原文件: 此调试方法可以避免在浏览器调试完代码后在到原文件手动修改代码的弊端,其具体方法如下: 1.先将要调试的页面在浏览器(Google)打开,这里小编打开桌面test文 ...

  2. html 手机输入法 搜索引擎,解决网页搜索框无法使用手机输入法中的“搜索”按钮的问题...

    先森之前就发现,"成航先森"在手机上访问使用搜索时,无法使用键盘上的"前往/搜索"按钮.点击没有反应,必须要点击网页中的搜索按钮才行.之前因为懒得管,就一直没有 ...

  3. 计算机主要键符的功能怎么读,计算机键盘中的全部按键基本功能.doc

    计算机键盘中的全部按键基本功能.doc 计算机键盘中的全部键按基本功能可分成四组,即键盘的四个分区:主键盘区.功能键区.编辑键区和数字键盘区 1. 主键盘区 主键盘也称标准打字键盘,此键区除包含26个 ...

  4. vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索

    看到标题,你可能第一反应是想着监听手机键盘的[完成]或[搜索]按钮,然后触发事件do something but ,No No No ,没有那么艰难复杂. vue中,要在手机端点击手机键盘的[完成]或 ...

  5. jsp页面input的value中的值含英文双引号处理方法

    jsp页面input的value值输出含英文双引号问题解决 在做Jsp页面开发时,我们经常使用JSTL表达式来进行页面的输出,但是突然遇到如下一个问题 问题描述:当数据库中某个字段带双引号时,inpu ...

  6. Uni App input 手机键盘回车搜索

    首先将input的confirm-type设置为search <input class="uni-input" confirm-type="search" ...

  7. uni-app input 调用软键盘中的搜索(确认)键

    <input confirm-type="search" @confirm="confirm" type="text" placeho ...

  8. html5 里面的type=”search“ ,h5版,点击手机键盘上的 ‘搜索”,”前往“等按钮,进行搜索

    效果图: 使用type="search " 会得到如下的效果. (PC端的效果): (手机端的效果):点击"搜索"的时候,可以进行查询. 去掉type=&quo ...

  9. 更改手机键盘换行变为搜索

    https://segmentfault.com/q/1010000002720680/a-1020000002720771 input type 设为 search,就可以了. 然后在css上设置 ...

最新文章

  1. SQL入门经典(第5版)学习笔记(三)
  2. c++面试常考的知识点汇总
  3. IndexedDB 简单封装
  4. SpringBoot------全局异常捕获
  5. 如何编写一个抢购bot_如何编写一个SkyWalking插件
  6. [2019杭电多校第一场][hdu6583]Typewriter(后缀自动机dp)
  7. 用户与系统(unix)
  8. 3.6 矩阵秩的其它重要关系
  9. MOOC·嵩天老师团队·北京理工大学:《Python语言程序设计》自学笔记
  10. ***HDU 3237 - Help Bubu(状压DP)
  11. t分布f分布与样本均值抽样分布_常用概率分布
  12. matlab椅子怎么做,设计师张雷:用竹纸做一把椅子
  13. Attention Rollout
  14. 月末关账流程和政策规定
  15. VueJs中的reactive函数
  16. UE4官方的快捷键大全
  17. android 静音接口,android 静音方法
  18. 什么是游戏盾防护?防护DDOS攻击无视CC攻击
  19. 织梦php 文章采集规则,DEDE全自动采集插件
  20. 输出所有的“水仙花数”,所谓的水仙花数是指一个3位数,其各位数字立方和等于该数本身。

热门文章

  1. python猜数字游戏编程入门_Python实现猜数字游戏
  2. 京东裁员10%的高管
  3. I/O 的五分钟法则
  4. pandas——交叉表与透视表
  5. Mysql莫名其妙的错误,语法没错却报语法错误
  6. 为什么你学了那么多,却没赚到钱?
  7. “华为起诉美国”事件进展:美国联邦法院给美国政府发传票
  8. surface pro3 禁用触屏方法
  9. 当前安装包签名出现异常_关于部分华为手机安装游戏提示“签名异常”问题说明...
  10. cf新手最多的服务器,从最初的42个服务器到现在仅剩4个,是什么让你离开了穿越火线?...