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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
简单实现js页面切换功能
Jan 10 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
angular select 默认值设置方法
Jun 23 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
如何通过JS实现转码与解码
Feb 21 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中GET变量的使用
2006/10/09 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
php 操作调试的方法
2012/07/12 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
vue中监听返回键问题
2019/08/28 Javascript
python模块restful使用方法实例
2013/12/10 Python
python处理cookie详解
2014/02/07 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Django中URL的参数传递的实现
2019/08/04 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python sorted排序方法如何实现
2020/03/31 Python
某公司部分笔试题
2013/11/05 面试题
护理学毕业生自荐信
2013/10/02 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
学习经验演讲稿
2014/05/10 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
班级口号大全
2014/06/09 职场文书
销售会议开幕词
2016/03/04 职场文书