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实现手机自定义弹出输入框的全部内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
jQuery插件EnPlaceholder实现输入框提示文字
用法: 首先在head中分别引入jQuery及本插件 <script type="text/javascript" src="jquery-1.7.2.min.js">script> <script type="text/javascript" src="jquery.enplaceholder.js">script> 然后就可以调用鸟 //通过value模拟placeholder $('i
-
jquery实现input输入框实时输入触发事件代码
复制代码 代码如下: <input id="productName" name="productName" class="wid10" type="text" value="" /> 复制代码 代码如下: //绑定商品名称联想 $('#productName').bind('input propertychange', function() {searchProductClassbyName()
-
jQuery如何解决IE输入框不能输入的问题
在IE10以上版本,微软为了提高IE输入框的便利性,增加了文本内容全部删除和密码眼睛功能,但是有些时候打开新的页面里,输入框却被锁定无法编辑,需要刷新一下页面,或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入.但是我们需要的是当下需要输入内容.那怎么办呢?可以用下面的方法解决: $("input[type='text']").each(function () { $(this).focus(function () { $(this).select(); }); }); $(&
-
jquery实现textarea输入框限制字数的方法
本文实例讲述了jquery实现textarea输入框限制字数的方法.分享给大家供大家参考.具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改.当然,这个也不是很完美. 复制代码 代码如下: <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv="content-type" content="text
-
Jquery动态添加输入框的方法
本文实例讲述了Jquery动态添加输入框的方法.分享给大家供大家参考.具体实现方法如下: <!-- 页头 --> <#include "../common/head.ftl"> <div id="onFailureDiv" class="alert alert-danger navbar-fixed-top" style="text-align:center; display:none">&
-
jQuery表单获取和失去焦点输入框提示效果的实例代码
复制代码 代码如下: $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } //聚焦
-
jquery控制表单输入框显示默认值的方法
本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script language="javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document)
-
jQuery实现的输入框选择时间插件用法实例
本文实例讲述了jQuery实现的输入框选择时间插件用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta charset = utf8> <
-
js与jquery实时监听输入框值的oninput与onpropertychange方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发
-
jQuery实现手机自定义弹出输入框
手机涉及到填写表单时,需要手机弹出自定义的输入框,而非手机自带的输入键盘,如大写数字等. 实现思路(考虑多种文本输入形式): 首先,文本框获取焦点时禁止手机弹出自带的输入键盘. // 禁用手机自带的键盘输入框 function forbidFocus(i){ $('#txt'+i).focus(function(){ document.activeElement.blur(); }); } 其次,显示与关闭自定义的输入键盘. // 打开自定义输入键盘 function showDialog(i)
-
jQuery实现的自定义弹出层效果实例详解
本文实例讲述了jQuery实现的自定义弹出层效果.分享给大家供大家参考,具体如下: dialog.css: #DialogBySHFLayer { width:100%; height:100%; left:0; top:0; position:fixed; z-index:500; background-color:#333333; filter:alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; } /*弹出的提示框*/ #DialogByS
-
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示 源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以
-
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code
-
基于Vue.js+Nuxt开发自定义弹出层组件
今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat
-
javascript+html5+css3自定义弹出窗口效果
本文实例为大家分享了js自定义弹出窗口效果展示的具体代码,供大家参考,具体内容如下 效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>自定义弹出窗口</title> <script type="text/javascript&qu
-
jQuery点击按钮弹出遮罩层且内容居中特效
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
-
jQuery实现鼠标经过弹出提示信息的地图热点效果
本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果.分享给大家供大家参考.具体如下: 这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&
-
jQuery、layer实现弹出层的打开、关闭功能
打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层,list.js: $(".add_category,.update").click(function(){ //弹出框 var doMain = $('.domain_name').val(); layer.open({ shade: [0.5, '#000', false], type: 2, area: ['900px', '530px'], fix: false, //不固定 maxmin
-
使用jQuery实现页面定时弹出广告效果
1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show()) 第六步:清除显示广告图片的定时操作 第七步:设置定时操作(隐藏广告图片的函数) 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide()) 第九步:清除隐藏广告图片的定时操作 <script
随机推荐
- js 常用正则表达式表单验证代码
- SQL Server 2008 数据库中创建只读用户的方法
- jquery批量设置属性readonly和disabled的方法
- QueryCode.vbs 文本文件编码查询工具
- centos7 mysql数据库安装和配置
- Spring3.1.1+MyBatis3.1.1的增、删、查、改以及分页和事务管理
- oracle数据库添加或删除一列的sql语句
- javascript中onmouse事件在div中失效问题的解决方法
- JS实现汉字与Unicode码相互转换的方法详解
- 在.NET中取得代码行数的方法
- php Static关键字实用方法
- 深入解析Python中的上下文管理器
- Android使用post方式上传图片到服务器的方法
- php实现按指定大小等比缩放生成上传图片缩略图的方法
- 基于javascript制作经典传统的拼图游戏
- Java简单获取字符串像素的方法
- MS-SQL Server 中单引号的两种处理方法
- jQuery移除元素自动解绑事件实现思路及代码
- 漂亮的脚本日历,和大家分享
- Java自定义注解的详解