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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
vue下的@change事件的实现
Oct 25 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变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python之指数与E记法的区别详解
2019/11/21 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
校园环保建议书
2014/05/14 职场文书
趣味运动会广播稿
2014/09/13 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers