тип изменения поля ввода с jQuery

Свойства типа не могут быть изменены, вам нужно заменить или наложить ввод на текстовый ввод и отправьте значение для ввода пароля при отправке.

Просто создайте новое поле, чтобы обойти эту проблему безопасности:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');

Окончательный способ использования 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");

Перенести идентификатор и значение из скрытого поля ввода в новое поле ввода.

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, например, свойство типа нельзя изменить , это может оказаться полезным в следующих случаях:

Прикрепить событие щелчка мыши/фокуса/изменить событие на новый элемент ввода, чтобы запустить то же самое событие на скрытом элементе ввода.

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

Старый скрытый входной элемент все еще находится внутри DOM и будет реагировать на событие, вызванное новым входным элементом. При смене идентификатора новый элемент будет действовать как старый и реагировать на любой вызов функции на идентификатор старого скрытого элемента, но выглядит иначе.

Немного хитро, но РАБОТЫ!!! ;-)

Еще проще... нет необходимости в создании динамических элементов. Просто создайте два отдельных поля, сделав одно из них полем "настоящего" пароля (type="password"), а другое - полем "поддельного" пароля (type="text"), установив для текста в поддельном поле светло-серый цвет и задав начальное значение 'Password'. Затем добавьте несколько строк Javascript с помощью jQuery, как показано ниже:

    <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 будет позиционировать один немного позже другого (отображая пробел), и поле будет казаться движущимся, когда пользователь вводит/выводит его.