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面向对象编程入门教程
Apr 16 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
json数据格式常见操作示例
Jun 13 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
js setTimeout 常见问题小结
2013/08/13 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
JS中Location使用详解
2015/05/12 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
简述Python中的进程、线程、协程
2016/03/18 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
八项规定整改方案
2014/02/21 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP