Изменение атрибута "type" из текста в пароль

Почему jQuery не меняет атрибут type #password_input на пароль?

<html>
    <head>
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#password_input").attr('type','password');
        });
        </script>
    </head>
    <body>
        <div id="loginBox">
            <form>
            <input type="text" id="username_input" name="username" /><br />
            <input type="text" id="password_input" name="password" />
            </form>
        </div>
    </body>
</html>

ОТВЕТЫ

Ответ 1

Невозможно изменить свойство/атрибут

'type.

edit: Это было точно для JQuery в то время, когда оно было опубликовано. См. Другие ответы, как это можно сделать сейчас.

Ответ 2

Да и может.

Попробуйте выполнить его работы

<input type="text" class="pwd">
  $('.pwd').click(function(){
  $(this).get(0).type='password';
});

Ответ 3

Это мера безопасности, которую используют большинство основных браузеров для смягчения экрана и кражи пароля (что более важно, иными словами, от password до text).

Я не могу сказать из вашего кода, что вы пытаетесь сделать, но здесь моя догадка: вы хотите, чтобы текстовое поле со словом password было в нем подсказкой, и когда оно фокусируется, пользователь вводит свои пароль в качестве поля пароля. Для этого вы можете использовать два элемента: <input type="text"> и <input type="password">, последний из которых скрыт изначально. Когда пользователь сосредоточится на текстовом поле, просто скройте его, покажите поле пароля и установите фокус. Это может стать сложным переключением между ними.

Update

В современных браузерах это проще сделать. Просто используйте что-то вроде этого (здесь jsFiddle):

<input type="password" placeholder="Password" />

Ответ 4

Вы не можете изменить атрибут type. вы должны создать новый элемент и удалить старый, например:

var originalBtn = $("#password_input");
var newBtn = originalBtn.clone();

newBtn.attr("type", "password");
newBtn.insertBefore(originalBtn);
originalBtn.remove();
newBtn.attr("id", "password_input");

Ответ 5

Вы всегда можете использовать чистые js как:

document.getElementsByName("login_pass")[0].type="text";

Ответ 6

Это сделает это

$('<input type="password" id="password_input" name="password" />').insertAfter('#password_input').prev().remove();

Проверьте рабочий пример http://jsfiddle.net/RyVU8/

UPDATE

Если вы хотите показывать простой текст в поле пароля, а затем сделать его обычным паролем в фокусе, вы можете сделать следующее

$('#clear').focus(function() {
    $('#clear').hide();
    $('#password_input').show().focus();
});
$('#password_input').blur(function() {
    if ($('#password_input').val() == '') {
        $('#clear, #password_input').toggle();
    }
});

где #clear представляет текстовое поле, которое показывает вместо поля пароля, когда оно размывается, и пользователь еще не ввел пароль.

проверить рабочий пример на http://jsfiddle.net/uNGKb/3/

Ответ 7

Просто создайте 2 поля ввода синхронизации. Один как пароль и один как текст. Затем переключите их видимость с помощью кнопки. Не забудьте скрыть ввод текста при запуске.

<input type="password" id="inp_passwd"/><input type="password" id="inp_passwd2"/>
<input id="btn_show_passwd" type="button" value="Show Password" />

JavaScript:

// sync input fields
$('#inp_passwd').keyup(function(){
    $('#inp_passwd2').val($(this).val());
});
// show clear password
$('#btn_show_passwd').mousedown(function(){
    $('#inp_passwd').hide();
    $('#inp_passwd2').show();
});
// hide clear password
$('#btn_show_passwd').mouseup(function(){
    $('#inp_passwd').show();
    $('#inp_passwd2').hide();
});
// hide hidden text-field on start
$('#btn_show_passwd').mouseup();

вы можете использовать setTimeout, а не вместо mouseup

Ответ 8

<span>Password:</span>
<input type="text" id="pwd" style="width: 180px; color: Gray;" onfocus="Changetxt();this.type='password'" onblur="if(this.value==''){this.type='text';textboxtype();}" value="Enter Your Password Here" />

 <script>

        function Changetxt() {
            if ($('#pwd').val() == "Enter Your Password Here") {
                $('#pwd').val('');
                $('#pwd').css('color', 'black');
            }
        }

        function textboxtype() {
            if ($('#pwd').val().length < 1) {
                $('#pwd').val('Enter Your Password Here');
                $('#pwd').css('color', 'gray');
            }
        }

    </script>

Ответ 9

Пробовали ли вы использовать .prop?

$("#password_input").prop('type','password');

http://api.jquery.com/prop/

Ответ 10

Возможно, потребуется отобразить текстовую информацию в поле пароля, сделав снимок, установить фон фона в поле пароля и удалить, когда фокус фонового поля пароля изменит фоновое изображение, чтобы добиться эффекта запроса пользователя

Ответ 11

Недавно я столкнулся с аналогичной проблемой, и мне хотелось бы оценить мое мнение. Я использовал некоторые из вышеперечисленных решений и некоторые другие, используя jQuery (который мне очень нравится). Но когда пришло время тестирования, мы понимаем, что решения через jQuery и attr() не работают. Поэтому я нахожу подходящее решение через чистый Javascript.

  var input = document.getElementById('txbOldPass');
  var newInput = document.createElement('input');

        newInput.type = 'text';
        newInput.id = input.id;
        newInput.value = input.value;
        input.parentNode.replaceChild(newInput, input);
        newInput.className = 'text';

и наоборот

  var input = document.getElementById('txbOldPass');
        var newInput = document.createElement('input');
        newInput.type = 'password';
        newInput.id = input.id;
        newInput.value = input.value;
        input.parentNode.replaceChild(newInput, input);
        newInput.className = 'password';

Ответ 12

Все решения здесь не работали для меня (Chrome Version 51.0.2704.103 m (64-разрядная версия)). Было ли это так, и он работает:

jQuery(function() {
    setTimeout(function(){
        jQuery('.pwForm').attr('type','password');
    }, 1);
});

Работает и с IE 11!

Дождитесь готовности DOM и подождите 1 миллисекунду. Затем измените тип = текст на тип = пароль

Ответ 13

Приведенные выше ответы частично ошибочны, если они не могут быть изменены. Да, его можно изменить с помощью метода prop/attr jquery. Дело в том, что оно поддерживается всеми браузерами, но IE