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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
javascript实现获取字符串hash值
May 10 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
js倒计时显示实例
Dec 11 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
浅谈javascript如何获取文件后缀名
Aug 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
构建简单的Webmail系统
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP注释实例技巧
2008/10/03 PHP
php adodb连接不同数据库
2009/03/19 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
php自定义分页类完整实例
2015/12/25 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python super()函数使用及多重继承
2020/05/06 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android