javascript - 将输入类型 ="text"更改为输入类型 ="password"onfocus()

Question

到目前为止，我已经完成了第 1 部分，我使用此 javascript 成功地将输入类型从文本更改为密码:

function replaceT(obj) {
        var newO = document.createElement('input');
        newO.setAttribute('type', 'password');
        newO.setAttribute('class', 'textbox');
        newO.setAttribute('name', obj.getAttribute('name'));
        obj.parentNode.replaceChild(newO, obj);
        newO.focus();
    } 

和ASP代码:

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="replaceT(this)"></asp:TextBox>

我要的是第二部分。如何在 blur 上返回“密码...”值。

简而言之，我想实现一个类似 facebook 的密码文本框。在 IE 上起作用的占位符属性。

这是 focus() 之前的情况:

然后在焦点之后:

然后返回这个onblur():

谢谢。

附言

我想在没有 jQuery(纯 javascript)的情况下实现它，并且我正在使用 IE 7+。

Answer 1

你不需要替换组件，只需将this的type设置为password，如下代码:

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="this.type='password'">

这是一个 jsfiddle 工作示例:http://jsfiddle.net/mZyTG/

更新

我没有测试这段代码，但它向 newO 添加了一个 onblur 事件监听器，并且在调用时将输入替换为旧的。

function replaceT(obj) {
        var newO = document.createElement('input');
        newO.setAttribute('type', 'password');
        newO.setAttribute('class', 'textbox');
        newO.setAttribute('name', obj.getAttribute('name'));
        newO.addEventListener("onblur", function(){newO.parentNode.replaceChild(obj, newO)}, false);
        obj.parentNode.replaceChild(newO, obj);
        newO.focus();
    }