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 相关文章推荐
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 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
简单采集了yahoo的一些数据
2007/02/14 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
JS实现放烟花效果
2020/03/10 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
用python找出那些被“标记”的照片
2017/04/20 Python
Python内置模块logging用法实例分析
2018/02/12 Python
python实现音乐下载器
2018/04/15 Python
深入了解Django中间件及其方法
2019/07/26 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
C语言编程练习
2012/04/02 面试题
高一生物教学反思
2014/01/17 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
面试后感谢信
2014/02/01 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
主题团日活动总结
2014/06/25 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python