$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

这是为了将password类型的#password输入字段(id="password")更改为普通的文本字段,然后填充文本"password"。

但这并不奏效。为什么?

表格如下:

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
  <ol>
    <li>
      <div class="element">
        <input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
      </div>
    </li>
    <li>
      <div class="element">
        <input type="password" name="password" id="password" value="" class="input-text" />
      </div>
    </li>
    <li class="button">
      <div class="button">
        <input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
      </div>
    </li>
  </ol>
</form>

当前回答

我还没有在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会将一个元素置于另一个元素之后(呈现空格),并且当用户进入/退出字段时,字段会出现移动。

我还没有在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并删除旧的元素?

使用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的任何函数调用,但看起来不同。

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

类型属性不能更改,您需要用文本输入替换或覆盖输入,并在提交时将值发送给密码输入。

这样就可以了。尽管可以改进为忽略现在不相关的属性。

插件:

(function($){
  $.fn.changeType = function(type) {  
    return this.each(function(i, elm) {
        var newElm = $("<input type=\""+type+"\" />");
        for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
            var attribute = elm.attributes[iAttr].name;
            if(attribute === "type") {
                continue;
            }
            newElm.attr(attribute, elm.attributes[iAttr].value);
        }
        $(elm).replaceWith(newElm);
    });
  };
})(jQuery);

用法:

$(":submit").changeType("checkbox");

小提琴:

http://jsfiddle.net/joshcomley/yX23U/