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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
JS实现self的resend
Jul 22 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
5.PHP的其他功能
2006/10/09 PHP
PHP脚本的10个技巧(6)
2006/10/09 PHP
php模板中出现空行解决方法
2011/03/08 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
yii用户注册表单验证实例
2015/12/26 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
bootstrap的工具提示实例代码
2017/05/17 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
js实现3D旋转效果
2020/08/18 Javascript
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
基于Python log 的正确打开方式
2018/04/28 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
校园元旦活动总结
2014/07/09 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
python基础之函数的定义和调用
2021/10/24 Python