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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
jquery禁用右键示例
Apr 28 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP爆绝对路径方法收集整理
2012/09/17 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
vue中监听返回键问题
2019/08/28 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Python 实现微信防撤回功能
2019/04/29 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python 图片去噪的方法示例
2019/07/09 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python deque模块简单使用代码实例
2020/03/12 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
英文商务邀请函范文
2015/01/31 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
护理心得体会范文
2016/01/22 职场文书
商业计划书之服装
2019/09/09 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
部分武汉产收音机展览
2022/04/07 无线电