在 IE 8 上输入类型密码文本 [重复]答案

【问题标题】：Input type password text on IE 8 [duplicate]在 IE 8 上输入类型密码文本 [重复]
【发布时间】：2013-08-22 16:49:45
【问题描述】：

我正在处理这个website

我遇到的问题是输入密码：

当您在 IE9 和其他浏览器（如 Chrome 和 mozilla）上单击它时，文本会发生变化，因此您可以输入密码。

但这在 IE8 上不会发生，如果你点击它，文本就会一直停留在那里，所以我无法输入密码。

这是我的输入代码：

<input class="login_modal password" type="text" value="Contraseña" onfocus="this.type='password';this.value=''" onblur="if(this.value == ''){this.type='text';this.value='Contraseña';}" />

有什么想法让它也可以跨浏览器和 Ie8 工作吗？

【问题讨论】：

首先不要滥用value 来替代<label> 将是一个好的开始。
使用placeholder并优雅降级。
我认为placeholder 不适用于ie8...
检查这个先前回答的问题stackoverflow.com/questions/13415151/…
旧版 IE 不允许更改输入字段的 type（因为该属性在早期的 DOM 规范中被定义为只读）。您只能创建一个新字段，并将现有字段替换为该字段。

标签： php javascript jquery html internet-explorer

【解决方案1】：

你可以像这样使用 jquery：

var defaultVal = 'Contraseña';


$('.password').on('focus', function(){
     var $this = $(this);
     var valOfThisBox = $this.val();

     if(valOfThisBox === '' ){
        this.val(defaultVal);
     }else{
        this.attr('type','password').val('');
     }
});

【讨论】：

我把它改成了这个，但它只是保留了文本，并没有改变为焦点输入密码......你可以在链接上看到它
Uncaught TypeError: Object #<HTMLInputElement> has no method 'val'
尝试使用旧版本的 jquery，比如 1.7 或 1.8，我没有 IE 8，在 Chrome 中运行没有任何问题....
我现在正在用 chrome 测试它，如果你加载页面，则通行证是空白的，如果我点击并输入，它只会显示密码，所以那里没有 type="password"
您删除了代码...对吗？

【解决方案2】：

您可以使用css选择器焦点：

loginModal password:focus, loginModalPassword.focus { loginmodalpassword.type='password' }

【讨论】：

【解决方案3】：

我前段时间用jQuery写了这个函数

用法：_describeInput($("#idOfYourInputField"));

替代：_describeInput($("input[name=NameOfYourInputField]"));

您可能想要更改正在应用的颜色，这是针对深色背景网站的快速草稿。对我来说效果很好。

function _describeInput(_field=false)
{
if (!$(_field)) { return false; }

$(_field).unbind();

$(_field).focus(function(){
    $(this).val(($(this).val()==$(this).attr("description"))?"":$(this).val());
    $(this).css({"color":"white"});
});

$(_field).focusout(function(){
    $(this).css({"color":(($(this).val()==$(this).attr("description"))?"gray":"white")});           
    $(this).val(($(this).val()=="")?$(this).attr("description"):$(this).val());
});

$(_field).css({"color":"gray"}).attr("description",$(_field).val());
}

【讨论】：