当用户单击“显示链接”时,显示密码,再次单击时将其隐藏
When a user clicks Show link, display the password, hide it when clicked again
我正在尝试让这个简单的脚本工作。基本上,当用户单击"显示"链接时,它将在密码文本框中显示密码,并在再次单击时将其隐藏。我已经寻找解决方案,但找不到我需要的任何东西。这是代码:
JavaScript
function toggle_password(target){
var tag = getElementById(target);
var tag2 = getElementById("showhide");
if (tag2.innerHTML == 'Show'){
tag.setAttribute('type', 'text');
tag2.innerHTML = 'Hide';
}
else{
tag.setAttribute('type', 'password');
tag2.innerHTML = 'Show';
}
}
.HTML
<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password('pwd0');" id="showhide">Show</a>
当我点击链接时,没有任何反应。我已经在不使用 if 语句的情况下对此进行了测试,但仍然什么也没做。
您没有使用 document
进行getElementById
function toggle_password(target){
var d = document;
var tag = d.getElementById(target);
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == 'Show'){
tag.setAttribute('type', 'text');
tag2.innerHTML = 'Hide';
} else {
tag.setAttribute('type', 'password');
tag2.innerHTML = 'Show';
}
}
您的id
名称是非法且难以处理的:pwd'.$x.'
您不能拥有其中一些字符。
HTML 4.01 规范规定 ID 标记必须以字母 ([A-Za-z]( 开头,后跟任意数量的字母、数字 ([0-9](、连字符 (-(、下划线 (_(、冒号 (:) 和句点 (.(。
此外,此方法不适用于所有浏览器,例如在IE <9中,您只能在元素附加到文档之前更改.type
尝试交换它们:
function swapInput(tag, type) {
var el = document.createElement('input');
el.id = tag.id;
el.type = type;
el.name = tag.name;
el.value = tag.value;
tag.parentNode.insertBefore(el, tag);
tag.parentNode.removeChild(tag);
}
function toggle_password(target){
var d = document;
var tag = d.getElementById(target);
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == 'Show'){
swapInput(tag, 'text');
tag2.innerHTML = 'Hide';
} else {
swapInput(tag, 'password');
tag2.innerHTML = 'Show';
}
}
希望这有帮助 -ck
一个使用jQuery
(pastebin(的示例:
$(document).ready(function() {
$("#showHide").click(function() {
if ($(".password").attr("type") == "password") {
$(".password").attr("type", "text");
} else {
$(".password").attr("type", "password");
}
});
});
#showHide {
width: 15px;
height: 15px;
float: left;
}
#showHideLabel {
float: left;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" class="password" size="25">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="showHide" />
<label for="showHide" id="showHideLabel">Show Password</label>
</td>
</tr>
</table>
来源:
http://www.voidtricks.com/password-show-hide-checkbox-click/
如何跨浏览器一致地对齐复选框及其标签
由于安全原因,您无法更改输入元素的类型。您必须用新元素替换整个元素。
它真的很容易实现...我找到了这篇博客文章,它描述了用几行代码做到这一点的方法。我认为保留这样的选项不是一个好的做法,因为必须认真对待密码。
这是该页面中的代码;它使用与您描述的相同的方法。 但是使用了一个复选框,实际上我已经看到了他在OSS中指出的内容,例如Linux。 他们甚至不会留下带星号的密码痕迹。(但是GUI的事情确实如此,不知道他们真的关心PW隐私,或者他们发现很难在命令行中做到这一点;-(
var textbox_elem = document.getElementById("password");
if(check_box.checked)
textbox_elem.setAttribute("type", "text");
else
textbox_elem.setAttribute("type", "password");
http://www.voidtricks.com/password-show-hide-checkbox-click/这是一个简单的教程,当选中复选框时在输入框中显示密码,并使用jQuery取消选中复选框时隐藏密码。
爪哇语
<script type="text/javascript">
$(document).ready(function () {
$("#showHide").click(function () {
if ($(".password").attr("type")=="password") {
$(".password").attr("type", "text");
}
else{
$(".password").attr("type", "password");
}
});
});
</script>
<!-- language: lang-html -->
.HTML *
<input type="password" class="password"><br>
<input type="checkbox" id="showHide"> Show?
* 我们有一个带有"密码"类的密码输入字段和一个ID为"showHide"的复选框
使用复选框显示/隐藏密码的简单解决方案,这是菜鸟级别,只需复制/粘贴即可。做!!! ;-)
您可以使用内联脚本来简单实现显示/隐藏密码。
<form>
<input
onmouseover="this.setAttribute('type','text')"
onmouseout="this.setAttribute('type','password')"
placeholder="Hover to show password!"
type="password"
name="password-login"
id="password-login"
>
</form>
如果我们将文本框类型设为"passowrd"
则不会显示字符,但是当我们创建文本框类型时"text"
字符会在我们键入时显示。
因此,逻辑非常简单。我们可以通过"setAttribute(type,newvalue)"
JavaScript 函数来更改任何 HTML 元素的类型。
完整的代码示例可以在下面的链接中看到:
http://www.tutor4web.com/javascript/how-to-show-password-as-text-with-checkbox-using-javascript/
您的解决方案可以是
function toggle_pass(){
var pass = document.getElementById('showhide').innerHTML;
if(pass=="show")
{
document.getElementById('pwd0').type = "text";
pass= "Hide";
}
else
{
document.getElementById('pwd0').type = "password";
pass = "Show Password";
}
}
虽然问题还有答案,但我仍然在发布这个答案。
function toggle_password () {
var tag = document.getElementById("pwd0");
var tag2 = document.getElementById("showhide");
if (tag2.innerHTML == 'Show'){
tag.type="text";
tag2.innerText = 'Hide';
}
else {
tag.type="password";
tag2.innerText = 'Show';
}
}
<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password();" id="showhide">Show</a>
我相信这就是你想要的:
function toggle_password(){
var d = document;
var tag = d.getElementById("pwd");
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == 'Show'){
tag.setAttribute('type', 'text');
tag2.innerHTML = 'Hide';
} else {
tag.setAttribute('type', 'password');
tag2.innerHTML = 'Show';
}
}
#input_field{
margin:25px;
padding:25px;
border:5px solid black;
}
<html>
<head>
</head>
<body>
<div id="input_field">
<label for="pwd">Password:</label>
<input type="password" value="" name="password" id="pwd" />
<a href="#" onclick="toggle_password();"
id="showhide">Show</a>
<div>
</body>
</html>
不要更改输入类型,请更改文本大小。让它非常小,用于隐藏。
- 检测页面上某个元素中选择(突出显示)或单击的内容
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
- 单击时显示,再次单击时隐藏
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 单击按钮时在灯箱中显示不同的内容
- OpenLayers在悬停时高亮显示功能,并在单击时选择
- 单击按钮时显示随机字符串
- 高亮显示单击菜单链接
- 显示单击的位置
- 如何在 *ngFor 列表中显示单击的元素,使用 Angular 2 隐藏其他元素
- 引导 - 折叠所有手风琴并显示单击
- 尝试使用PHP / Javascript构建一个可点击的索引,该索引显示单击的每个项目的数据
- 显示单击菜单项
- 使用typescript显示单击的链接中的网格
- 未显示单击时更改复选框状态
- 使用jQuery显示单击项目的标题值
- 如何突出显示单击的按钮,而不传递按钮的id
- 返回一个对象,显示单击了哪个元素
- 在jQuery中隐藏显示的类并显示单击的类