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入门教程(2) JS基础知识
Jan 31 Javascript
javascript getElementsByTagName
Jan 31 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
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页面间传递参数实例代码
2008/06/05 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
IE与FireFox中的childNodes区别
2011/10/20 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python 字符串与数字输出方法
2018/07/16 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
pandas 对group进行聚合的例子
2019/12/27 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
大学生自我鉴定书
2014/03/24 职场文书
个人贷款担保书
2014/04/01 职场文书
关于环保的标语
2014/06/13 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
建议书的格式及范文
2015/09/14 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python