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 鼠标拖动图标技术
Feb 07 Javascript
jquery异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
小程序云开发之用户注册登录
May 18 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 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自动获取目录下的模板的代码
2010/08/08 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python读取中文txt文本的方法
2018/04/12 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
法律进学校实施方案
2014/03/15 职场文书
党员干部承诺书
2014/03/25 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
初中班主任评语
2014/04/24 职场文书
团日活动总结怎么写
2014/06/25 职场文书
邀请函模板
2015/02/02 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
《叶问2》观后感
2015/06/15 职场文书
检讨书范文
2019/04/16 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python