一、input的搜索框

   在input标签里面把type设置为search就可以了。弹出的手机键盘回车键也会变成搜索或者是搜索的图标。

<input id="search" type="search" ></input>
  • 1

设置type为search的搜索框,当输入内容的时候,后面会多出一个x,点击x可以清空输入的内容。 

二、获取键盘搜索事件

   输入内容之后直接点击手机键盘的搜索按钮就可以进行搜索了。以下是获取键盘搜索事件:

//获取键盘搜索按钮事件
$("#search").on('keypress', function(e) {
var keycode = e.keyCode;
//获取搜索框的值
var searchContent = $(this).val();
if (keycode == '13') {
e.preventDefault();
//请求搜索接口
if (searchContent == '') {
alert('请输入检索内容!');
} else {
alert(searchContent);
}
}
});

input弹出的手机键盘搜索事件的更多相关文章

  1. 登录界面,body上有背景图,点击输入框时,弹出的手机键盘会把背景图顶变形,而且会把footer顶上去

    js: //防止背景图被手机键盘压缩变形 $(document).ready(function () { $('body').css({'height':$(window).height()}) }) ...

  2. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

  3. android 弹出的软键盘遮挡住EditText文本框的解决方案

    1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...

  4. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  5. Android - 隐藏EditText弹出的软键盘输入(SoftInput)

    隐藏EditText弹出的软键盘输入(SoftInput) 本文地址: http://blog.csdn.net/caroline_wendy 保持界面的整洁, 能够选择在进入界面时, 隐藏EditT ...

  6. 移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘

    一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...

  7. 禁止移动端input弹出软键盘

    在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...

  8. 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  9. IOS微信点击input弹出输入法,关闭后页面留白解决方案

    场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加 ...

随机推荐

  1. HTTP无状态协议和session原理(access_token原理)

    无状态协议是指协议对务处理没有记忆能力.缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大.另一方面,在服务器不需要先前信息时它的应答就较快. Http协议不 ...

  2. Python学习记录4(语句)

    赋值语句 序列解包 条件语句 语句块 布尔变量 条件执行和if语句 条件运算符 循环 while语句 for循环 迭代工具 跳出循环 break continue while truebreak语句 ...

  3. 201621123080 《Java程序设计》第2周学习总结

    Week02-Java基本语法与类库 1. 本周学习总结 本周主要学习了java的数据类型.运算符,String类,java的简单输入输出与流程控制. 在做题上对String和数组的理解与区分仍不够深 ...

  4. vsftpd服务安装与虚拟用户配置

    vsftpd的全名是“Very secure FTP Daemon” 一.安装vsftpd安装db4-util用于生成认证文件 yum -y install db4-utils 安装vsftpd yu ...

  5. 【markdown】 markdown 语法

    介绍几个 markdown 语法学习地址和相关工具 参考链接 coding gitlab markdown offical markdown editor markdown editor2

  6. LeetCode(282) Peeking Iterator

    题目 Given an Iterator class interface with methods: next() and hasNext(), design and implement a Peek ...

  7. Linux学习-开机过程的问题解决

    忘记 root 密码的解决之道 新版的 systemd 的管理机制中,默认的 rescue 模式是无法直接取得 root 权限的喔!还是得要 使用 root 的密码才能够登入 rescure 环境.没 ...

  8. Linux学习-透过 systemctl 管理服务

    透过 systemctl 管理单一服务 (service unit) 的启动/开机启动与观察状态 一般来说,服务的启动有两个阶段,一 个是『开机的时候设定要不要启动这个服务』, 以及『你现在要不要启动 ...

  9. selenium2等待元素加载

    1.硬性等待 Thread.sleep(8000); 所谓的硬性等待就是,执行完相应操作就等待我设置的8s.无论网速快与慢,网速快的话,也许5s就打开网页了,可是程序必须接着等待剩下的3秒. 网速慢的 ...

  10. Win7里IIS7部署WebService

    最近忙于一个Web的Bug修正,是先人写的一个东东,架构很简单,一个前端的项目,一个WebService的项目,以及后台的一些dll.之前一直很排斥这个产品,因为它没法启动,印象中没有跑得起来过的时候 ...