Question

我有用户名和密码文本框。我希望他们都显示默认文本，即“用户名”和“密码”，但是当用户点击密码框时，出于安全原因，它应该动态地更改为“密码”类型。

我已经设法使用javascript代码轻松完成此操作，但它不想在IE中工作。

<input id="username" class="username" name="u" type="text" value="username" onclick="if(this.value='username') {this.value=''};" />
<input id="password" class="password" name="p" type="text" value="password" onclick="if(this.value='password') {this.value=''; this.type='password'};" />

Answer 1

假设你的html代码是这样的

<input type="text" id="txtId" />

您可以使用Jquery替换它，

$('#txtId').replaceWith('<input type="password" id="txtId" />')

Answer 2

IE只允许您在创建元素时设置input元素的类型一次。尝试在此之后设置它将失败。

如果你想“改变”IE中的元素，你可能需要做的是创建另一个具有相同属性的元素（当然除了类型），并用它替换现有元素。

或者为密码创建一个虚拟文本框，并隐藏真实密码框 - 在焦点上，虚拟框应该隐藏自己，并显示并关注真实密码框。

Answer 3

您会考虑使用JQuery吗？

$("[name=fieldname]").attr("type", "password");

Answer 4

这是一个用相同的值替换任何表单元素的函数，知道它的id：

function replaceWithPassword(id)
{
    var o = $('input#' + id + ', textarea#'+id + ', select#'+id);
    o.replaceWith('<input type="password" value="' + o.val() + '" id="' + id + '" />');
}

Answer 5

这对我有用把它放在头部

function changeBack()
 {
     if(document.getElementById('smsl_pw').value=='')
     {
        document.getElementById('smsl_pw').type='text';
        document.getElementById('smsl_pw').value='Password';

     }

 }

 function changePass()
 {
    document.getElementById('smsl_pw').type='password'; 
    document.getElementById('smsl_pw').value='';

 }

这是输入字段 <input id="smsl_pw" onclick="changePass();" onblur="changeBack();" name="smsl_pw" type="text" value="Password">

希望它有助于某人

以编程方式将textbox类型从type ='text'更改为type ='password'

5 个答案: