изменить тип поля ввода с помощью jQuery - PullRequest
199 голосов
/ 09 октября 2009
$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

Предполагается, что поле ввода #passwordid="password"), которое имеет значение type 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>

Ответы [ 28 ]

3 голосов
/ 26 февраля 2012

Простое решение для всех тех, кто хочет функционировать во всех браузерах:

HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

JQuery

$("#passwordSwitch").change(function(){
    var p = $('#password');
    var h = $('#passwordHide');
    h.val(p.val());
    if($(this).attr('checked')=='checked'){
        h.hide();
        p.show();
    }else{
        p.hide();
        h.show();
    }
});
3 голосов
/ 02 июля 2011

Я получил то же сообщение об ошибке при попытке сделать это в Firefox 5.

Я решил, используя код ниже:

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

И чтобы использовать его, просто установите для атрибутов onFocus и onBlur ваших полей что-то вроде следующего:

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

Я также использую это для поля имени пользователя, поэтому оно переключает значение по умолчанию. Просто установите второй параметр функции на '', когда вы вызываете его.

Также, возможно, стоит отметить, что типом поля моего пароля по умолчанию на самом деле является пароль, на случай, если у пользователя не включен javascript или если что-то пойдет не так, тогда его пароль по-прежнему защищен.

Функция $ (document) .ready - это jQuery, которая загружается после завершения загрузки документа. Это тогда изменяет поле пароля на текстовое поле. Очевидно, вам придется изменить 'password_field_id' на идентификатор поля вашего пароля.

Не стесняйтесь использовать и изменять код!

Надеюсь, это поможет всем, у кого была такая же проблема, как и я:)

- CJ Kent

EDIT: Хорошее решение, но не абсолютное. Работает на FF8 и IE8, НО не полностью на Chrome (16.0.912.75 ver). Chrome не отображает текст Password при загрузке страницы. Также - FF будет отображать ваш пароль при включенном автозаполнении.

2 голосов
/ 21 октября 2014

С этим гораздо проще работать:

document.querySelector('input[type=password]').setAttribute('type', 'text');

и для того, чтобы снова включить его в поле пароля ( при условии, что поле пароля является вторым тегом ввода с типом текста ):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')
2 голосов
/ 28 октября 2011

Полагаю, вы могли бы использовать фоновое изображение, содержащее слово "пароль", и заменить его на пустое фоновое изображение на .focus().

.blur() ----> изображение с паролем

.focus() -----> изображение без «пароля»

Вы также можете сделать это с некоторыми CSS и jQuery. Текстовое поле должно отображаться точно над полем пароля, hide () находится в фокусе () и фокусируется на поле пароля ...

2 голосов
/ 09 октября 2009

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

2 голосов
/ 25 августа 2014

Попробуйте это
Демо здесь

$(document).delegate('input[type="text"]','click', function() {
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
}); 
$(document).delegate('input[type="password"]','click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
}); 
2 голосов
/ 08 декабря 2017

Это сработало для меня.

$('#newpassword_field').attr("type", 'text');
1 голос
/ 11 марта 2011

использовать это очень легко

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />
1 голос
/ 13 февраля 2012

Просто так:

this.type = 'password';

например

$("#password").click(function(){
    this.type = 'password';
});

Предполагается, что ваше поле ввода было установлено как «текст» перед рукой.

1 голос
/ 12 октября 2011
jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));
...