$(function() {

//页面加载后自动聚焦输入框
$('#ipt').focus();

//点击页面任何地方都聚焦输入框
$(document).on('click',
function() {
$('#ipt').focus();
})

//为输入框绑定文本框输入事件
$('#ipt').on('input',
function(e) {
var pw = $('#ipt').val();
var list = $('.psw'),
lists = $('.pswShow');

for (var i = 0; i < 6; i++) { if (pw[i]) { list.find('li').eq(i).text('*'); lists.find('li').eq(i).text(pw[i]); } else { list.find('li').eq(i).text(''); lists.find('li').eq(i).text(''); } } }); //显示密码/隐藏密码 $('.showBtn').on('click', function() { var list = $('.psw'), lists = $('.pswShow'), self = $(this); if (lists.hasClass('cur')) { list.addClass('cur'); lists.removeClass('cur'); self.text('显示密码'); } else { lists.addClass('cur'); list.removeClass('cur'); self.text('隐藏密码'); } }) })
查看实例:模拟密码输入框demo
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code