jQuery实现手机上输入后隐藏键盘功能


Posted in Javascript onJanuary 04, 2017

摘要: 例如,让用户输入手机发送验证码,输完11位手机号后,自动隐藏键盘

例如,让用户输入手机发送验证码,输完11位手机号后,自动隐藏键盘

表单大概这样的:

<div class="form-group">
  <input type="tel" class="form-control input-lg" id="mobile" name="mobile" placeholder="请输入手机号码">
</div>
<div class="form-group">
  <div class="input-group">
    <input type="tel" class="form-control input-lg verify-input" id="verify" name="verify" placeholder="请输入验证码" >
    <div class="input-group-btn">
      <span class="input-group-btn">
        <input value="获取" class="btn btn-info btn-lg verify-btn" id="get_verify" type="button">
      </span>
    </div>
  </div>
</div>

那么,jQuery大概是这样的:

$('#mobile').on('input',function(){
  var mobile = $(this).val();
  if(mobile.length == 11) {
    $('#get_verify').focus();
    return false;
  }
});

这是通过监听输入框里的值,如果是11位就把焦点移动“获取”这个按钮,从而实现键盘的隐藏!

ipone上测试可行!!!

引用路径:http://stackoverflow.com/questions/8780346/how-to-hide-keyboard-in-jquerymobile-page-in-a-phonegap-app

以上所述是小编给大家介绍的jQuery实现手机上输入后隐藏键盘功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
豆瓣网的jquery代码实例
Jun 15 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
实测jquery data()如何存值
Aug 18 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
Node.js 回调函数实例详解
Jul 06 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 #Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 #Javascript
微信小程序 石头剪刀布实例代码
Jan 04 #Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 #Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 #Javascript
AngularJS入门示例之Hello World详解
Jan 04 #Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
You might like
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
二招解决php乱码问题
2012/03/25 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
node.js基于express使用websocket的方法
2017/11/09 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
小学庆六一活动方案
2014/02/28 职场文书
条幅标语大全
2014/06/20 职场文书
《春酒》教学反思
2016/02/22 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android