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 相关文章推荐
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Javascript获取某个月的天数
May 30 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python爬虫用mongodb的理由
2020/07/28 Python
python如何停止递归
2020/09/09 Python
巴西网上药房:onofre
2016/11/21 全球购物
学生自我鉴定
2013/12/18 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python