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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
js Dialog 实践分享
Oct 22 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 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
一个域名查询的程序
2006/10/09 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
分析Python中解析构建数据知识
2018/01/20 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
什么是属性访问器
2015/10/26 面试题
大学生思想汇报范文
2013/12/31 职场文书
会议活动邀请函
2014/01/27 职场文书
领导干部考察材料
2014/02/08 职场文书
募捐倡议书
2014/04/14 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android