jQuery实现手机自定义弹出输入框


Posted in Javascript onJune 13, 2016

手机涉及到填写表单时,需要手机弹出自定义的输入框,而非手机自带的输入键盘,如大写数字等。

jQuery实现手机自定义弹出输入框

实现思路(考虑多种文本输入形式):

首先,文本框获取焦点时禁止手机弹出自带的输入键盘。

// 禁用手机自带的键盘输入框
function forbidFocus(i){
$('#txt'+i).focus(function(){
document.activeElement.blur();
});
} 
其次,显示与关闭自定义的输入键盘。
// 打开自定义输入键盘
function showDialog(i) {
$('#txt'+i).on('click', function(){
$('#num'+i).animate({bottom: "0"}, 'fast');
// 若多种文本输入框时,需隐藏其他的输入键盘
hideDialog(i);
});
}
// 关闭自定义输入键盘
function hideDialog(i) {
$('.popup-list').not('#num'+i).animate({bottom: -h + 'px'}, 'fast');
}

最后,点击自定义的输入键盘,做判断使对应的input获取值。

以上所述是小编给大家介绍的jQuery实现手机自定义弹出输入框的全部内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 #Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 #Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 #Javascript
浅谈JavaScript对象的创建方式
Jun 13 #Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 #Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 #Javascript
You might like
php读取数据库信息的几种方法
2008/05/24 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
详解Js中的模块化是如何实现的
2017/10/18 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
vue实现文字加密功能
2019/09/27 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python 项目目录结构设置
2020/02/14 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python 解析xml文件的示例
2020/09/29 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
团队口号大全
2014/06/06 职场文书
python - asyncio异步编程
2021/04/06 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis