将 input type="text" 更改为 input type="password" onfocus()答案

【问题标题】：Change input type="text" to input type="password" onfocus()将 input type="text" 更改为 input type="password" onfocus()
【发布时间】：2013-06-28 05:11:34
【问题描述】：

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

我想要的是第二部分。如何在模糊中返回“密码...”值。

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

focus() 之前的情况如下：

然后在焦点之后：

然后回到这个onblur()：

谢谢。

附言

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

【问题讨论】：

你的问题很模棱两可。请给出一个简洁的标题并详细说明您想要什么。
您可以使用简单的背景图像来实现此目的。您不必更改类型。 Onfocus 只是删除背景图像，如果没有内容，则在模糊时添加背景图像。
HTML5 格式 na @ChristianMark?
最好的方法是使用水印api，它可以帮助你更多
其实我知道Watermark。但问题是当我尝试在文本框上放置一个空/空字符串值时根本不起作用。

标签： javascript html asp.net forms textbox

【解决方案1】：

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..."placeholder="Enter your password" >

只需将此代码放在您的 asp 部分，不需要 javascript 希望这会有所帮助

编辑 2：希望这有帮助，用 ie 10 测试过

 <html>
 <script>
 function a()
{
document.getElementById("p1").value="";
document.getElementById("p1").type="password";

}

function b()
{
if(document.getElementById("p1").value=="")
{
document.getElementById("p1").type="text";
document.getElementById("p1").value="Password";
}
else
{   
document.getElementById("p1").type="password";

}


}
</script>
<body>
Password:<input type="text" value="Password" onclick="a();" id="p1"         

onblur="b();">
<body>
</html>

【讨论】：

ie7 不支持占位符
嗨@Ritesh，我尝试了您的解决方案，它适用于 IE 9 和 10。但是，我需要使其适用于 IE 7 和 8。感谢您的努力。

【解决方案2】：

我将从一个建议开始，将您的 javascript 和 css 从您的标记中分离出来。它被认为是老派，现在是一种不好的做法。 IE 中的 setAttribute 和 getAttribute 存在一些已知问题，因为它可能对您很重要，我会尝试使用其他东西。尝试用谷歌搜索：issues with setAttribute and getAttribute in ie

我在 jsfiddle 中做了一些东西，我希望它对你有用，如果没有，请告诉我。代码 sn-p：simple example。

HTML

<input class='placeholder' value="Type here..."/>

CSS

.placeholder {
    color: #aaa; 
}
.text {
    color: #000;
}

var input = document.getElementsByTagName('input')[0];

if(input.addEventListener) {
    input.addEventListener('blur', function(){
        this.type = 'text' 
        this.value = 'Type here...';
        this.className = 'placeholder';
    }, false);
    input.addEventListener('focus', function(){
        this.type = 'password'
        this.value = '';
        this.className = 'text';
    }, false);
} else if(input.attachEvent) {
    input.attachEvent('onblur', function(){
        this.type = 'text' 
        this.value = 'Type here...';
        this.className = 'placeholder';
    });
    input.attachEvent('onfocus', function(){
        this.type = 'password'
        this.value = '';
        this.className = 'text';
    });
}

通过 id 访问元素将使其更具体和更快，但通过标签名称访问元素将允许您在循环的帮助下对所有输入元素应用相同的代码。

虽然我使用的是 linux 并且没有时间在 ie 中测试它，但它应该可以工作。

我的示例仅适用于您的特定任务，我建议您从中制作一个功能以使其适用于更广泛的任务领域。

编辑：对于较新的浏览器，我会选择placeholder attribute。这是browser support

【讨论】：

您能否更新您的答案并使其与该字段兼容：<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="replaceT(this)"></asp:TextBox>
@ChristianMark 每种服务器端语言在接收到客户端之前都会被翻译成简单的 html。由于 JS 在浏览器中运行，它确实使上面的代码即使在您的示例中也有效。我还发现 ASP TextBox 将呈现为<input type=text/>，这就是为什么我看不出您不能使用我的代码的任何原因。还有你可能感兴趣的：how to change a rendered element or at least its type

【解决方案3】：

试试这个小插件

 <script>
   $(".contentplaceholder").placeholderContent();
 </script>

检查小提琴

http://jsfiddle.net/Shinov/VdtBs/

检查纯 JavaScript 占位符的新小提琴

http://jsfiddle.net/Shinov/VdtBs/2/

【讨论】：

这是用 jQuery 运行的吗？
我想在没有 jQuery（纯 javascript）的情况下实现这个，我正在使用 IE 7+。 :)
感谢您的努力。
检查我用纯javascript更新的新小提琴jsfiddle.net/Shinov/VdtBs/2

【解决方案4】：

您不需要更换组件，只需将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();
    }

【讨论】：

我实际上得到了第一个问题。我通过替换元素来实现这一点。由于我也在做IE，所以你做的与IE不兼容。
现在明白了，你的问题还不清楚......替换的问题是我认为它会失去与asp生成的组件的“集成”
我建议您使用不同的解决方案...使用 asp 生成 2 个文本框，一个将是文本 tupe 和另一种密码类型...因此，当单击文本类型时，您将隐藏它并显示密码输入一个
@ChristianMark 我用一种解决方案对其进行了更新，该解决方案可能在浏览器中有效，但不确定您是否能够在 asp 服务器中获取此字段的值
嘿@ChristianMark..这是我的朋友davidwalsh。他使用占位符html5...看看这个：davidwalsh.name/html5-placeholder