Question

更换html输入标记的type（type =“password”）参数中的密码或文本，而不是整个html输入类型标记，如下所示，会更好吗？

$("#unhide_typing").live("click", function(){
    var security_answer = $("#security_answer").val();
    var hnumber = $("#hnumber").val();

    if ($('#unhide_typing').is(':checked')) {
        $("#security_answer").replaceWith('<input type="text" name="answer" value="'+security_answer+'" id="security_answer">');
        $("#hnumber").replaceWith('<input type="text" name="hnumber" value="'+hnumber+'" id="hnumber">');
    } else {
        $("#security_answer").replaceWith('<input type="password" name="answer" value="'+security_answer+'" id="security_answer">');
        $("#hnumber").replaceWith('<input type="password" name="hnumber" value="'+hnumber+'" id="hnumber">');
    }
});

这需要与IE 7/8一起使用，我想保留当前输入的文本。

Answer 1

是的，你可以这样做。

$("#unhide_typing").live("click", function(){
  var security_answer = $("#security_answer").val();
  var hnumber = $("#hnumber").val();
  var type = $(this).is(':checked') ? "text" : "password";

  $("#security_answer").replaceWith('<input type="' + type + '" name="answer" value="'+security_answer+'" id="security_answer" />');
  $("#hnumber").replaceWith('<input type="' + type + '" name="hnumber" value="'+hnumber+'" id="hnumber" />');
});

注意：在处理程序中，您可以使用this来引用#unhide_typing，如果您使用的是jQuery ver 1.7+，那么最好使用on代替{{1} }}

Answer 2

使用jQuery替换HTML元素的某些属性在旧版本上可能会很棘手。我建议你继续使用.prop()函数，不要替换DOM元素。

所以，你的代码应该是这样的：

$("#unhide_typing").live("click", function(){

    var security_answer = $("#security_answer").val();
    var hnumber = $("#hnumber").val();

    if ($('#unhide_typing').is(':checked')) {
        $('#security_answer').prop('type', 'text');
        $('#hnumber').prop('type', 'text');
    } else {
        $('#security_answer').prop('type', 'password');
        $('#hnumber').prop('type', 'password');
    }
});

Answer 3

是的，最好只更换类型有很多原因：

更好的性能（不会删除元素，然后创建/插入新的元素）
不破坏浏览器的内置撤消机制（对于这个用例可能并不重要，但也许在其他用例中）。
绑定到原始输入的任何其他事件处理程序将不会被删除

请确保使用jQuery的.prop()方法而不是.attr()：

http://jsfiddle.net/uxBZN/2/

重构在jquery中替换

3 个答案: