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 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
js运动应用实例解析
Dec 28 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
一个ftp类(ini.php)
2006/10/09 PHP
浅谈php和.net的区别
2014/09/28 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
JS 对象介绍
2010/01/20 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python实现自主查询实时天气
2018/06/22 Python
使用Python处理BAM的方法
2018/09/28 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
python包的导入方式总结
2021/03/02 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
爽歪歪广告词
2014/03/20 职场文书
文秘求职信范文
2014/04/10 职场文书
标准版离职证明书
2014/09/12 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
警告通知
2015/04/25 职场文书
办公室规章制度范本
2015/08/04 职场文书
学术会议开幕词
2016/03/03 职场文书