我还没有在IE中测试(因为我需要这个用于iPad站点)-一个我不能改变HTML但我可以添加JS的表单:

document.getElementById('phonenumber').type = 'tel';

(和jQuery比起来，老派JS太丑了!)

但是，http://bugs.jquery.com/ticket/1957链接到MSDN:“在Microsoft Internet Explorer 5中，type属性是读/写一次的，但仅在使用createElement方法创建输入元素时，并且在将其添加到文档之前。”所以也许你可以复制元素，改变类型，添加到DOM并删除旧的元素?

更容易……不需要创建所有动态元素。只需创建两个单独的字段，其中一个为“真实”密码字段(type="password")，另一个为“假”密码字段(type="text")，将假字段中的文本设置为浅灰色，并将初始值设置为“password”。然后用jQuery添加几行Javascript代码，如下所示:

    <script type="text/javascript">

        function pwdFocus() {
            $('#fakepassword').hide();
            $('#password').show();
            $('#password').focus();
        }

        function pwdBlur() {
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }
        }
    </script>

    <input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
    <input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />

因此，当用户输入“假”密码字段时，它将被隐藏，真实字段将被显示，焦点将移动到真实字段。他们将永远无法在假字段中输入文本。

当用户离开真实的密码字段时，脚本将查看它是否为空，如果为空，将隐藏真实的字段并显示假的字段。

注意不要在两个输入元素之间留下空格，因为IE会将一个元素置于另一个元素之后(呈现空格)，并且当用户进入/退出字段时，字段会出现移动。

使用jQuery的终极方法:

将原始输入字段隐藏在屏幕中。

$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input

通过JavaScript创建新的输入字段。

var new_input = document.createElement("input");

将ID和值从隐藏的输入字段迁移到新的输入字段。

new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input

为了解决IE上的错误，比如类型属性不能被改变，你可能会发现下面的方法很有用:

将click/focus/change事件附加到新的输入元素，以便在隐藏的输入上触发相同的事件。

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

旧的隐藏输入元素仍然在DOM中，因此将与新输入元素触发的事件进行反应。当ID交换时，新的输入元素将像旧的输入元素一样，并响应对旧的隐藏输入的ID的任何函数调用，但看起来不同。

有点棘手，但有效!!: -)

简单的解决方案，所有人都想在所有浏览器的功能:

HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

jQuery

$("#passwordSwitch").change(function(){
    var p = $('#password');
    var h = $('#passwordHide');
    h.val(p.val());
    if($(this).attr('checked')=='checked'){
        h.hide();
        p.show();
    }else{
        p.hide();
        h.show();
    }
});

我还没有在IE中测试(因为我需要这个用于iPad站点)-一个我不能改变HTML但我可以添加JS的表单:

document.getElementById('phonenumber').type = 'tel';

(和jQuery比起来，老派JS太丑了!)

但是，http://bugs.jquery.com/ticket/1957链接到MSDN:“在Microsoft Internet Explorer 5中，type属性是读/写一次的，但仅在使用createElement方法创建输入元素时，并且在将其添加到文档之前。”所以也许你可以复制元素，改变类型，添加到DOM并删除旧的元素?

我在尝试在Firefox 5中执行此操作时收到了相同的错误消息。

我用下面的代码解决了这个问题:

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

要使用它，只需设置你的字段的onFocus和onBlur属性如下所示:

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

我也将此用于用户名字段，因此它将切换为默认值。只需将函数的第二个参数设置为“当您调用它时”。

同样值得注意的是，我的密码字段的默认类型实际上是密码，以防用户没有启用javascript或出现错误，这样他们的密码仍然受到保护。

美元(文档)。ready函数是jQuery，当文档加载完成时加载。然后将密码字段更改为文本字段。显然，你必须将“password_field_id”更改为密码字段的id。

请随意使用和修改代码!

希望这能帮助到每个和我有同样问题的人:)

——肯特

编辑: 很好的解决方案，但不是绝对的。在FF8和IE8上工作，但不完全在Chrome上(16.0.912.75版本)。Chrome浏览器在页面加载时不显示密码文本。 另外，当自动填充开启时，FF将显示您的密码。