将输入类型="文本"更改为输入类型="密码"onfocus()

Question

到目前为止,我已经完成了第一部分,我用这个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>

我想要的是第二部分.如何返回" 密码... "值onblur.

简而言之,我想实现一个类似facebook的密码文本框.在IE上运行的占位符属性.

以前是这样的focus():

然后关注:

然后回到这个onblur():

谢谢.

PS

我想在没有jQuery(纯javascript)的情况下实现这一点,我正在使用IE 7+.

Answer 1

您不需要替换组件，只需将 的设置type为this如下password代码所示：

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

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

更新

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

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();
    }