一、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

    大家应该都知道http是什么吧,肯定会回答不就是浏览器地址那东西吗,有啥好说的,接下来咱们来深入刨析下http这东西. 什么叫http:超文本传输协议(HTTP)是用于传输诸如HTML的超媒体文档的应 ...

  2. 【转】VxWorks信号量分析

    Wind内核中有二进制信号量.计数信号量和互斥信号量三种类型,为了是运用程序具有可移植性,还提供了POSIX(可移植操作系统接口)信号量 .在VxWorks中,信号量是实现任务同步的主要手段,也是解决 ...

  3. 标准C++(1)

    一.引用 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: 例: int& num; 引用类似于起别名 注 ...

  4. jmeter操作mysql数据库

    1.导入jdbc的jar包,因为jmeter本身不能直接连接mysql,所以需要导入第三方的jar包,来连接mysql 2.创建数据库连接配置,mysql的url.端口号.账号.密码 在JDBC Co ...

  5. 面试:如何把xxx.sh使用/etc/init.d/xxx.sh start启动,并且可以用chkconfig配置开机自启动

    chkconfig原理: 1.脚本放到/etc/init.d下面,并且可执行(/etc/init.d/sshd) 需要被chkconfig管理,需要添加进去chkconfig  --add  sshd ...

  6. numpy 三个点的使用[...]

    numpy [...]语法简单使用 Python numpy中切片功能与列表切片类似,但功能更加强大 本文主讲numpy中[...]的简单使用,后续工作继续补充. import numpy >& ...

  7. Python并发编程之多进程(实战)

    一.multiprocessing和Process multiprocessing提供了支持子进程.通信和数据共享.执行不同形式的同步,提供了Process.Queue.Pipe.Lock等组件 创建 ...

  8. Java并发编程的艺术 记录(四)

    Java线程的状态: new :初始状态,但是还没调用start方法. runnable:运行状态. blocked:阻塞状态. waiting:等待状态,表示当前线程需要等待其他线程作出一些特定动作 ...

  9. csapp-15213错误修正18-10-28

    1.p229 练习题3.15 b.答案错误,应为400419

  10. loj2028 「SHOI2016」随机序列

    定义区间是内部只含有乘号的区间. 对于区间左端点是 \(l \geq 2\) 的情况,左端点前头是加号的情况和前头是减号的情况的个数是相同的.因此这些区间不对答案产生贡献. 所以区间左端点必定是 \( ...