我想让这个简单的脚本工作。基本上,当用户单击“显示”链接时,它将在密码文本框中显示密码,并在再次单击时隐藏密码。我已经搜索了解决方案,但找不到任何我需要的东西。这是代码:
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';
}
}
<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';
}
}
希望这有助于确定
我相信这就是你想要的:
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>
请勿更改输入类型,更改文本大小。使Hide非常小。
以下是使用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/
How to align checkboxes and their labels consistently cross-browsers
由于安全原因,您无法更改输入元素的类型。您必须用新的元素替换整个元素。
它真的很容易实现...我发现这个blog post用几行代码描述了它的方法。我认为保留这样的选项并不是一个好习惯,因为必须认真对待密码。
这是该页面的代码;它使用与您描述的相同的方法。但是使用了一个复选框。实际上我已经看到了他在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取消选中复选框时隐藏它。
使用Javascript
<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?
*我们有一个密码输入字段,其中包含“password”类和一个id为“showHide”的复选框
使用复选框显示/隐藏密码的简单解决方案,这是noob级别只需复制/粘贴。完成!!! ;-)
您可以使用内联脚本来实现显示/隐藏密码的简单实现。
<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"
字符会在我们键入时显示。
因此逻辑非常简单。我们可以通过JavaScript的"setAttribute(type,newvalue)"
函数更改任何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>