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添加 ...
随机推荐
- Windows上PostgreSQL安装配置教程
Windows上PostgreSQL安装配置教程 这篇文章主要为大家详细介绍了Windows上PostgreSQL安装配置教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 PostgreSQL的 ...
- 【线段树 泰勒展开】Codechef April Challenge 2018 Chef at the Food Fair
第一次写泰勒展开:本地和CC差距好大 题目大意 大厨住的城市里办了一场美食节.一条街上开设了$N$个摊位,编号为$1∼N$.这天开始时,第$i$个摊位的食物会导致食物中毒的概率是$P_i$.在这一天中 ...
- 编译安装 nginx php swoole
安装之前先 准备环境 yum install gcc gcc-c++ automake pcre pcre-devel zlip zlib-devel openssl openssl-devel 然后 ...
- Linux - which xxx - 查找执行的命令所在的路径
Linux 下,我们常使用 cd ,grep,vi 等命令,有时候我们要查到这些命令所在的位置,如何做呢? Linux 下有2个命令可完成该功能:which ,whereis which 用来查看当 ...
- CentOS7.2 虚拟机网卡无法启动
在开机之后,发现网卡没有启动起来,进行了如下操作1.ifup ens33Bringing up interface ens33: Error: Connection activation failed ...
- 面向对象之元类(metaclass)
一.前言: 要搞懂元类必须要搞清楚下面几件事: 类创建的时候,内部过程是什么样的,也就是我们定义类class 类名()的过程底层都干了些啥 类的调用即类的实例化过程的了解与分析 我们已经知道元类存在的 ...
- STM32F407VET6之IAR之ewarm7.80.4工程建立(基于官方固件库1.6版本) 的工程文件目录
最后整理结构如下所示,├─cmsis│ startup_stm32f401xx.s│ startup_stm32f40xx.s│ startup_stm32f40_41xxx.s│ startup_s ...
- POJ:1961-Period(寻找字符串循环节)
Period Time Limit: 3000MS Memory Limit: 30000K Description For each prefix of a given string S with ...
- PAT Basic 1077
1077 互评成绩计算 在浙大的计算机专业课中,经常有互评分组报告这个环节.一个组上台介绍自己的工作,其他组在台下为其表现评分.最后这个组的互评成绩是这样计算的:所有其他组的评分中,去掉一个最高分和一 ...
- LA 5010 Go Deeper 2-SAT 二分
题意: 有\(n\)个布尔变量\(x_i\),有一个递归函数.如果满足条件\(x[a[dep]] + x[b[dep]] \neq c[dep]\),那么就再往深递归一层. 问最多能递归多少层. 分析 ...