jquery,6位密码输入框效果

啥也不说，直接贴代码

<!DOCTYPE html>
<html><head><title>仿支付宝支付效果</title><meta charset="utf-8"/><meta name="author" content="tony_xf@foxmail.com"><style><!--*{margin:0;padding:0; box-sizing: border-box;}li{list-style:none}.quickPayBox{position:relative; width:242px; height: 38px;margin:20px auto;}.quickPayBox .password{position:absolute;top:0;left:0;width:242px;height:38px;opacity:0.01}.showView{width: 242px; height:38px;border:1px solid #808080;}.showView li{ float:left; width:40px; height:38px; border-right:1px solid #d4d4d4;text-align: center; line-height: 30px;}.showView li:last-child{border:none;}.showView li .circle{ display:none; width:8px; height:8px; border-radius:50%; background:#000;}--></style></head><body><div><div class="quickPayBox"><input type="tel" name="password" class="password" maxlength="6"><ul class="showView"><li><i class="circle"></i></li><li><i class="circle"></i></li><li><i class="circle"></i></li><li><i class="circle"></i></li><li><i class="circle"></i></li><li><i class="circle"></i></li></ul></div></div><script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script><script>$('.password').on('input',function(){var value = $(this).val();var length = value.length;$('.showView').find('li').each(function(i){if(i < length){$(this).find('.circle').css({display: 'inline-block'});}else{$(this).find('.circle').hide();}})});</script></body>
</html>

这里只是做了一个效果，实际运用时还需要加正则去校验。
注：这个效果在iphone手机上有瑕疵，会有个光标在那里闪烁，暂时还未找到办法去掉。期望大神路过，贴出解决方案^_^！

转载于:https://www.cnblogs.com/tony-xf/p/7359433.html

jquery,6位密码输入框效果相关推荐

仿淘宝、支付宝6位密码输入框
1.浏览器兼容:Chrome.IE6+.FireFox.Safari.Opera.360.搜狗. 2.预览见网址:http://www.jq22.com/yanshi7704 3.源码见网址:http ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
php生成文字闪烁,如何用jquery实现闪烁文字效果
用jquery实现闪烁文字效果的方法:首先获取到最新一条记事的pid,并在添加成功后来闪动这条记事:然后闪动的方法可以写到函数里,直接调用:最后有闪动就要有定时器,开启定时器即可. 本教程操作环境:w ...
html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
jquery工具箱旋转动画效果
jquery工具箱旋转动画效果今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...
jquery实现章节目录效果
<html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...
jQuery背景墙聚光灯效果
jQuery背景墙聚光灯效果 dreamweaver免费视频教程: 51RGB Dreamweaver板块加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频绝对干货! ...
html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
使用jQuery实现时钟的效果
使用jQuery实现时钟的效果要用jQuery实现时钟的效果首先要给它布局. 用一个div来装所要写的内容,再给这个div一个类为box,再给这个box设置样式让他居中设置它的边框并且设置它的bor ...

jquery,6位密码输入框效果

jquery,6位密码输入框效果相关推荐

最新文章

热门文章