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 switch case 另类写法
Mar 14 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Vue实现跑马灯效果
May 25 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
实例讲解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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jquery中this的使用说明
2010/09/06 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
完善的jquery处理机制
2016/02/21 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
python中的函数用法入门教程
2014/09/02 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python可以实现栈的结构吗
2020/05/27 Python
通过cmd进入python的步骤
2020/06/16 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
客户代表自我评价范例
2013/09/24 职场文书
工程造价自荐信
2013/10/09 职场文书
大学生物业管理求职信
2013/10/24 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
大学社团活动策划书
2014/01/26 职场文书
收银员岗位职责
2014/02/07 职场文书
班主任先进事迹材料
2014/12/17 职场文书
经理岗位职责范本
2015/04/15 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers