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的eval()中使用函数的进一步讨论
Jul 26 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
window.location.hash知识汇总
Nov 09 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
javascript实现标签切换代码示例
May 22 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
构建一个JavaScript插件系统
Oct 20 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页面中文乱码分析
2013/10/29 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP二维数组去重算法
2016/12/17 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
js module大战
2019/04/19 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
PyQt5实现拖放功能
2018/04/25 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python help函数实例用法
2020/12/06 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
美发店5.1活动方案
2014/01/24 职场文书
音乐教师求职信
2014/06/28 职场文书
小浪底导游词
2015/02/12 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL