单个密码输入框:
html
<body>
<div>
<input type="password" value="" name="password1" id="password1" class="password" /><br />
<label><input type="checkbox" id="show_password" />显示密码</label>
</div>
</body>
css样式
.password {
width: 200px;
height: 24px;
font-size: 24px;
line-height: 24px;
bordeR: 1px solid #ccc;
}
jquery代码
$(function(){
// 先取得 #password1 及產生一個文字輸入框
var $password = $('#password1'),
$passwordInput = $('<input type="text" name="' + $password.attr('name') + '" class="' + $password.attr('className') + '" />');
// 當勾選顯示密碼框時
$('#show_password').click(function(){
// 如果是勾選則...
if(this.checked){
// 用 $passwordInput 來取代 $password
// 並把 $passwordInput 的值設為 $password 的值
$password.replaceWith($passwordInput.val($password.val()));
}else{
// 用 $password 來取代 $passwordInput
// 並把 $password 的值設為 $passwordInput 的值
$passwordInput.replaceWith($password.val($passwordInput.val()));
}
});
});
以下js解决多个密码输入框显示的问题：
html
<body>
<div>
<input type="password" value="" name="password1" id="password1" class="password" />
<br />
<input type="password" value="" name="password2" id="password2" class="password" />
<br />
<input type="password" value="" name="password3" id="password3" class="password" />
</div>
</body>
jquery
$(function(){
// 把每一個有 .password 的密碼輸入框做處理
$(':password.password').each(function(){
// 先取得 #password1 及產生一個文字輸入框
// 並產顯示密碼用的勾選框
var $password = $(this),
$passwordInput = $('<input type="text" name="' + $password.attr('name') + '" class="' + $password.attr('className') + '" />'),
$checkbox = $('<label><input type="checkbox" />顯示密碼</label>');
// 把勾選框加在密碼輸入框的後面
$password.after($checkbox);
// 當勾選顯示密碼框時
$checkbox.find(':checkbox').click(function(){
// 如果是勾選則...
if(this.checked){
// 用 $passwordInput 來取代 $password
// 並把 $passwordInput 的值設為 $password 的值
$password.replaceWith($passwordInput.val($password.val()));
}else{
// 用 $password 來取代 $passwordInput
// 並把 $password 的值設為 $passwordInput 的值
$passwordInput.replaceWith($password.val($passwordInput.val()));
}
});
});
});
分享到：
相关推荐
这里，`#togglePassword`是触发切换的按钮ID，`#passwordInput`是密码输入框的ID。当用户点击按钮时，输入框的类型会在`password`和`text`之间切换。 此外，为了提供更好的用户体验，插件可能还会添加视觉反馈，...
在"JQuery实现输入框大写提示"这个场景中，我们的目标是监听用户在密码输入框中的输入，并在用户输入大写字母时提供提示。这涉及到以下几个关键知识点： 1. **事件绑定**：JQuery的`.on()`方法用于绑定事件处理器。...
在注册一些网站的时候，我们经常看到可以显示密码的情况，今天特意整理了下这个jquery代码分享给大家使用。 使用方法： 1、调用lanrenzhijia.css样式以及jquery库 2、调用本案例推荐的一段jquery代码在head中 3、...
本篇文章将详细介绍如何使用jQuery插件来模拟支付宝密码输入框的效果，以提升网页中密码输入的安全感知和视觉体验。 首先，让我们了解jQuery。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件...
在本项目中，"jQuery模仿苹果mac系统登录界面的点击显示密码输入框效果.zip" 提供了一个使用jQuery实现的功能，即模拟苹果Mac系统的登录界面，其中包含一个特殊的效果：当用户点击显示密码按钮时，密码输入框会从...
【jQuery仿微信密码输入框】是一种常见的前端交互设计，它主要应用于移动应用或者网页中，让用户在输入密码时获得与微信、支付宝等应用相似的体验。这种设计通常包含六位数字的输入框，用户每输入一位数字，相应的...
标题中的"jQuery输入框密码显示隐藏代码"指的是使用jQuery实现的一个功能，允许用户在登录或注册表单中切换密码输入框的状态，即在输入时显示或隐藏密码。 这个功能对于提升用户体验至关重要，因为用户在输入敏感...
1. **动态显示与隐藏**：当用户需要输入支付密码时，通过调用jQuery方法可以方便地弹出密码输入框。这个过程可以通过添加或删除CSS类来实现，例如，添加一个隐藏类来隐藏输入框，移除隐藏类则使其可见。 2. **数字...
在本文中，我们将深入探讨如何使用jQuery插件来模拟支付宝密码输入框的效果。这个插件是针对移动手机Web开发设计的，旨在为用户提供一个类似支付宝应用中的安全密码输入体验。我们将详细讲解涉及到的技术栈，包括...
jQuery隐藏显示密码插件就是为了解决这个问题而设计的。它允许用户在输入密码时切换显示状态，即从明文到星号或圆点的隐藏模式，增强用户对密码输入的控制感，同时也增加了安全性。 ### jQuery基础 jQuery是一个...
《jQuery在移动端实现数字密码输入框特效的探索与实践》 在移动互联网时代，用户界面的设计与交互体验显得尤为重要。特别是在涉及用户隐私和安全的环节，如登录、支付等，数字密码输入框成为了不可或缺的元素。本文...
本教程将详细介绍HTML5密码输入框的最新特性，以及如何实现显示与隐藏密码的功能。 在传统的HTML4中，密码输入框通常通过`<input type="password">`来创建。用户输入的内容会被遮蔽，以星号或圆点显示，保护用户...
1. **事件监听**：通过jQuery的`$(element).on('input')`监听密码输入框的实时输入事件，一旦用户在输入框中键入字符，就会触发回调函数。 2. **正则表达式匹配**：根据预定义的规则（例如，要求包含大写字母、小写...
"隐藏密码" : "显示密码"); ``` - 可以添加CSS样式以提供视觉反馈，例如，当密码可见时，按钮背景色改变。 7. **安全性考量** - 虽然这个功能提高了用户交互性，但不应忽视安全问题。在实际应用中，密码在...
本资源“jQuery控制输入框显示或者隐藏密码.zip”提供了一个实用的功能，即通过jQuery来切换文本输入框（通常是密码输入框）的可见性，允许用户在明文和密文模式之间切换，提升用户体验。以下将详细讲解实现这一功能...
不论在PC电脑端或者手机客户端，我们都会遇到这种可以控制你的输入框显示或者隐藏密码的效果 今天特意整理了一个推荐给大家使用 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的...
总的来说，`jQuery_passwordStrength`是一个实用的工具，通过结合jQuery的便利性和密码强度检测的策略，提高了用户在创建新密码时的安全意识，同时也为开发者提供了一种易于集成的解决方案，使得密码输入框更加智能...
在移动支付领域，一个安全、便捷且具有用户体验感的支付密码输入框是至关重要的。"html5支付宝手机支付密码输入框特效"是一个专为优化移动设备上的支付流程而设计的特效，它可能包含了自定义样式、交互反馈以及安全...
总结，"jQuery点击输入框弹出软键盘输密码特效"是一个结合了jQuery事件处理、CSS样式和JavaScript功能的实用工具。通过理解和应用这些技术，开发者可以为用户提供更加安全、便捷的密码输入方式，提升网站的整体体验...