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 当前日期加(天、周、月、年)
Aug 09 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
require.js中的define函数详解
Jul 10 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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如何把汉字转化为拼音
2015/12/11 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
设定php简写功能的方法
2019/11/28 PHP
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
师生聚会感言
2014/01/26 职场文书
人事助理自荐信
2014/02/02 职场文书
公司任命书范本
2014/06/04 职场文书
博士生求职信
2014/07/06 职场文书
大学生作弊检讨书
2014/09/11 职场文书
个人工作能力自我评价
2015/03/05 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python