input弹出的手机键盘搜索事件
一、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弹出的手机键盘搜索事件的更多相关文章
- 登录界面,body上有背景图,点击输入框时,弹出的手机键盘会把背景图顶变形,而且会把footer顶上去
js: //防止背景图被手机键盘压缩变形 $(document).ready(function () { $('body').css({'height':$(window).height()}) }) ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- android 弹出的软键盘遮挡住EditText文本框的解决方案
1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- Android - 隐藏EditText弹出的软键盘输入(SoftInput)
隐藏EditText弹出的软键盘输入(SoftInput) 本文地址: http://blog.csdn.net/caroline_wendy 保持界面的整洁, 能够选择在进入界面时, 隐藏EditT ...
- 移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘
一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...
- 禁止移动端input弹出软键盘
在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- IOS微信点击input弹出输入法,关闭后页面留白解决方案
场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局 解决方法: 给input添加 ...
随机推荐
- RabbitMQ Server的安装、配置及常用命令
首先需要安装Erlang环境: http://www.rabbitmq.com/server.html 下载RabbitMQ Server的windows安装包并安装到D盘下: http://www. ...
- *运算和&运算
/* &:取地址运算符 *:指针运算符(或称为间接运算符),取指针所指向的对象的内容 */ int a,b; int *pointer_1, *pointer_2; pointer_1 = & ...
- sql 经典加强巩固练习题
由于本人需要加强巩固一下数据库知识,就搜罗了一些题目来练习,感觉不错,故分享一下资源难度层度依次上升这50道里面自认为应该没有太多错误,而且尽可能使用了最简单或是最直接的查询,有多种不相上下解法的题目 ...
- OI杂记
从今天开始记录一下为数不多天的OI历程 8.25 上 今天举行了难得的五校联考,模拟noip,题目的解压密码竟然是$aKnoIp2o18$,对你没有看错!!! 7:50老师?啊啊啊啊,收不到题目啊,还 ...
- while True 死循环
while True 死循环示例: count = 0 #给count设置变量为0 while True: count += 1 #每循环一次,count+1 : count += 1 等同于coun ...
- Python 前端的第三方库
sweetalert sweeralert:地址 这个使用很简单,需要在在他们的,css和js文件. 酷炫的结果 datatables datatables:地址 已https://datata ...
- nuc 第二届山西省大学生程序设计大赛 魔力手环
problem 很妙啊--发现状态转移矩阵每一行都可以由上一行平移得到,每次只算第一行然后平移,\(O(n^3)\) 就变成了 \(O(n^2)\). #include <iostream> ...
- Oracle 表空间的日常维护与管理
目录 Oracle 表空间的日常维护与管理 1.创建数据表空间 2.创建临时表空间 3.创建 UNDO 表空间 4.表空间的扩展与修改大小 5.表空间重命名 6.表空间的删除 7.更改表空间的读写模式 ...
- python算法-排列组合
排列组合 一.递归 1.自己调用自己 2.找到一个退出的条件 二.全排列:针对给定的一组数据,给出包含所有数据的排列的组合 1:1 1,2:[[1,2],[2,1]] 1,2,3:[[1,2,3],[ ...
- 计算n的阶乘(n!)末尾0的个数
题目: 给定一个正整数n,请计算n的阶乘n!末尾所含有“0”的个数. 举例: 5!=120,其末尾所含有的“0”的个数为1: 10!= 3628800,其末尾所含有的“0”的个数为2: 20!= 24 ...