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 EasyPager 分页函数
May 25 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
js实现数字滚动特效
Dec 16 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
vue elementUI批量上传文件
Apr 26 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
Terran历史背景
2020/03/14 星际争霸
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php解决安全问题的方法实例
2019/09/19 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
python实用代码片段收集贴
2015/06/03 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Python for i in range ()用法详解
2020/09/18 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
python绘制雷达图实例讲解
2021/01/03 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
护士演讲稿范文
2014/01/05 职场文书
个人欠条范本
2015/07/03 职场文书
学习委员竞选稿
2015/11/20 职场文书
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python