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在光标位置插入内容的实现代码
Jun 18 Javascript
JavaScript获取路径设计源码
May 22 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
处理canvas绘制图片模糊问题
May 11 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
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python线程池threadpool使用篇
2018/04/27 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python turtle库的画笔控制说明
2020/06/28 Python
旷课检讨书2000字
2014/01/14 职场文书
党员民主评议自我评价
2014/10/20 职场文书
师德承诺书
2015/01/20 职场文书
党员个人年度总结
2015/02/14 职场文书
保安辞职信范文
2015/02/28 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android