在不使用cloneNode的情况下将输入类型从IE中的密码更改为文本

Question

My use case is to display a textbox for entering a credit card number and by default it should be masked. And then I would have a checkbox, clicking on which the above text box should unmask the creditCardNumber.

I am able to achieve this using jQuery, however I am running into Spring binding issues whenever I have the checkbox checked. It is not taking the latest value when the checkbox is checked.

On change of the checkbox I am calling this from ready function:

    $("#showCardNumber").change (function(){
        unmaskCreditCardTxtBox($(this)); 
    });


function unmaskCreditCardTxtBox(jqCheckBox){
$("#creditCardNumber").each(
    function(){
        var oldbox = $(this);
        var boxtype = 'password';
        if(checkBoxIsChecked(jqCheckBox)) {
            boxtype = 'text';
        }
        swapCreditCardTextBox(oldbox, boxtype);
    }
);
}



 function swapCreditCardTextBox(oldbox, boxtype){
    var newbox = $("<input></input>");
    newbox.attr('id',oldbox.attr('id'));
    newbox.attr('name',oldbox.attr('name'));
    newbox.attr('type',boxtype);
    newbox.attr('maxlength', oldbox.attr('maxlength'));
    newbox.attr("class", oldbox.attr("class"));
    newbox.val(oldbox.val());
    newbox.attr("className",oldbox.attr("className"));
    oldbox.replaceWith(newbox);
}

function checkBoxIsChecked(jqCheckBox) {
    return jqCheckBox.is(":checked");
}

Answer 1

The reason is not taking the value is because you are creating a whole new object to replace the old one. All you need is:

$('#creditCardNumber').get(0).type = 'text';

You can handle this in your change event for the checkbox.

It will also work if you simply do:

$('#creditCardNumber').attr('type', 'text');