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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
js表头排序实现方法
Jan 16 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
js中new一个对象的过程
Feb 20 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
详解webpack 入门与解析
Apr 09 Javascript
JavaScript中的 new 命令
May 22 Javascript
vue v-model的用法解析
Oct 19 Javascript
原生JS实现拖拽功能
Dec 16 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python3 下载网络图片代码实例
2019/08/27 Python
python字符串下标与切片及使用方法
2020/02/13 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
生产车间标语
2014/06/11 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
实训报告范文大全
2014/11/04 职场文书
休学证明范本
2015/06/19 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python