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 相关文章推荐
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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中的日期处理方法集锦
2007/01/02 PHP
php UBB 解析实现代码
2011/11/27 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
webpack之引入图片的实现及问题
2018/10/08 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
wxPython实现带颜色的进度条
2019/11/19 Python
jupyter notebook 多行输出实例
2020/04/09 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
新学期决心书
2014/03/11 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
留学推荐信中文范文
2015/03/26 职场文书
业务内勤岗位职责
2015/04/13 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
2016年寒假生活小结
2015/10/10 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL