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

$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

Это должно изменить #passwordполе ввода (с id="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>

Вполне вероятно, что это действие предотвращается как часть модели безопасности браузера.

Редактировать: действительно, тестируя прямо сейчас в Safari, я получаю ошибку type property cannot be changed.

Редактировать 2: это похоже на ошибку прямо из jQuery. Использование следующего прямого кода DOM прекрасно работает:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

Редактировать 3: Прямо из источника jQuery, это, похоже, связано с IE (и может быть либо ошибкой, либо частью их модели безопасности, но jQuery не конкретен):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

Еще проще ... нет необходимости создавать все динамические элементы. Просто создайте два отдельных поля, сделав одно поле «реальным» паролем (type = "password") и одно - полем "fake" password (type = "text"), установив для текста в поле fake светло-серый цвет и установка начального значения на «Пароль». Затем добавьте несколько строк 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 будет располагаться один немного за другим (рендеринг пробела), и поле будет двигаться, когда пользователь входит / выходит из него.

Одношаговое решение

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

В настоящее время вы можете просто использовать

$("#password").prop("type", "text");

Но, конечно, вы должны просто сделать это

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

во всех, кроме IE. Существуют заполнители, имитирующие эту функциональность в IE.

Более кросс-браузерное решение ... Надеюсь, суть в этом кому-то поможет.

Это решение пытается установить typeатрибут, и в случае сбоя оно просто создает новый <input>элемент, сохраняя атрибуты элемента и обработчики событий.

changeTypeAttr.js( GitHub Gist ):

/* x is the <input/> element
   type is the type you want to change it to.
   jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
    x = $(x);
    if(x.prop('type') == type)
        return x; //That was easy.
    try {
        return x.prop('type', type); //Stupid IE security will not allow this
    } catch(e) {
        //Try re-creating the element (yep... this sucks)
        //jQuery has no html() method for the element, so we have to put into a div first
        var html = $("<div>").append(x.clone()).html();
        var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
        //If no match, we add the type attribute to the end; otherwise, we replace
        var tmp = $(html.match(regex) == null ?
            html.replace(">", ' type="' + type + '">') :
            html.replace(regex, 'type="' + type + '"') );
        //Copy data from old element
        tmp.data('type', x.data('type') );
        var events = x.data('events');
        var cb = function(events) {
            return function() {
                //Bind all prior events
                for(i in events)
                {
                    var y = events[i];
                    for(j in y)
                        tmp.bind(i, y[j].handler);
                }
            }
        }(events);
        x.replaceWith(tmp);
        setTimeout(cb, 10); //Wait a bit to call function
        return tmp;
    }
}

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

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

Лучший способ использовать 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 type property cannot be changed, вы можете найти это полезным, как показано ниже:

Прикрепите событие click / focus / change к новому элементу ввода, чтобы вызвать то же событие на скрытом вводе.

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

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

Немного сложно, но работает !!! ;-)

Вы пытались использовать .prop ()?

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

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

Я не тестировал в IE (так как мне нужно было это для сайта iPad) - форму, которую я не мог изменить HTML, но я мог добавить JS:

document.getElementById('phonenumber').type = 'tel';

(Старая школа JS ужасна рядом со всеми jQuery!)

Но http://bugs.jquery.com/ticket/1957 ссылается на MSDN: «Начиная с Microsoft Internet Explorer 5, свойство type доступно только для чтения / записи, но только когда элемент ввода создается с помощью метода createElement и прежде чем он будет добавлен в документ ". так что, может быть, вы могли бы дублировать элемент, изменить тип, добавить в DOM и удалить старый?

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

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

Я получил то же сообщение об ошибке при попытке сделать это в 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 Кент

РЕДАКТИРОВАТЬ: хорошее решение, но не абсолютное. Работает на FF8 и IE8, НО не полностью на Chrome (16.0.912.75 ver). Chrome не отображает текст пароля при загрузке страницы. Также - FF будет отображать ваш пароль при включенном автозаполнении.

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

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();
    }
});

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

$('#newpassword_field').attr("type", 'text');

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

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

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

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

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

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

$(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+'">');
}); 

Это работает намного легче с этим:

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

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

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')

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

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

$('#pass').focus(function() { 
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});

<input id='pass' size='70' type='text' value='password' name='password'>

jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

Это сделает свое дело. Хотя это может быть улучшено, чтобы игнорировать атрибуты, которые сейчас не имеют значения.

Плагин:

(function($){
  $.fn.changeType = function(type) {  
    return this.each(function(i, elm) {
        var newElm = $("<input type=\""+type+"\" />");
        for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
            var attribute = elm.attributes[iAttr].name;
            if(attribute === "type") {
                continue;
            }
            newElm.attr(attribute, elm.attributes[iAttr].value);
        }
        $(elm).replaceWith(newElm);
    });
  };
})(jQuery);

Использование:

$(":submit").changeType("checkbox");

Скрипки:

http://jsfiddle.net/joshcomley/yX23U/

Просто это:

this.type = 'password';

Такие как

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

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

Вот небольшой фрагмент, который позволяет вам изменять typeэлементы документов.

jquery.type.js( GitHub Gist ):

var rtype = /^(?:button|input)$/i;

jQuery.attrHooks.type.set = function(elem, value) {
    // We can't allow the type property to be changed (since it causes problems in IE)
    if (rtype.test(elem.nodeName) && elem.parentNode) {
        // jQuery.error( "type property can't be changed" );

        // JB: Or ... can it!?
        var $el = $(elem);
        var insertionFn = 'after';
        var $insertionPoint = $el.prev();
        if (!$insertionPoint.length) {
            insertionFn = 'prepend';
            $insertionPoint = $el.parent();
        }

        $el.detach().attr('type', value);
        $insertionPoint[insertionFn]($el);
        return value;

    } else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
        // Setting the type on a radio button after the value resets the value in IE6-9
        // Reset value to it's default in case type is set after value
        // This is for element creation
        var val = elem.value;
        elem.setAttribute("type", value);
        if (val) {
            elem.value = val;
        }
        return value;
    }
}

Эта проблема решается путем удаления inputиз документа, измененияtype и затем возвращая его туда, где он был изначально.

Обратите внимание, что этот фрагмент был протестирован только для браузеров WebKit - никаких гарантий ни на что другое!

Вот метод, который использует изображение рядом с полем пароля для переключения между просмотром пароля (ввод текста) и его не видением (ввод пароля). Я использую изображение «открытый глаз» и «закрытый глаз», но вы можете использовать все, что вам подходит. Это работает, когда у вас есть два входа / изображения, и после нажатия на изображение значение копируется из видимого ввода в скрытый, а затем их видимость меняется. В отличие от многих других ответов, в которых используются жестко заданные имена, этот достаточно общий, чтобы использовать его несколько раз на странице. Это также изящно ухудшается, если JavaScript недоступен.

Вот как они выглядят на странице. В этом примере пароль-A был раскрыт, нажав на его глаз.

$(document).ready(function() {
  $('img.eye').show();
  $('span.pnt').on('click', 'img', function() {
    var self = $(this);
    var myinp = self.prev();
    var myspan = self.parent();
    var mypnt = myspan.parent();
    var otspan = mypnt.children().not(myspan);
    var otinp = otspan.children().first();
    otinp.val(myinp.val());
    myspan.hide();
    otspan.show();
  });
});

img.eye {
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>

<form>
<b>Password-B:</b>
<span class="pnt">
<span>             
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span> 
<span style="display:none">            
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span> 
</span>
</form>

Мне нравится этот способ, чтобы изменить тип элемента ввода: old_input.clone () .... Вот пример. Есть флажок "id_select_multiple". Если это значение изменено на «selected», элементы ввода с именем «foo» должны быть заменены на флажки. Если он не отмечен, они должны снова стать переключателями.

  $(function() {
    $("#id_select_multiple").change(function() {
     var new_type='';
     if ($(this).is(":checked")){ // .val() is always "on"
          new_type='checkbox';
     } else {
         new_type="radio";
     }
     $('input[name="foo"]').each(function(index){
         var new_input = $(this).clone();
         new_input.attr("type", new_type);
         new_input.insertBefore($(this));
         $(this).remove();
     });
    }
  )});

вот решение DOM

myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;

Я создал расширение jQuery для переключения между текстом и паролем. Работает в IE8 (вероятно, 6 и 7, но не проверено) и не потеряет ваше значение или атрибуты:

$.fn.togglePassword = function (showPass) {
    return this.each(function () {
        var $this = $(this);
        if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
            var clone = null;
            if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
                clone = $('<input type="password" />');
            }else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
                clone = $('<input type="text" />');
            }
            $.each($this.prop("attributes"), function() {
                if(this.name != 'type') {
                    clone.attr(this.name, this.value);
                }
            });
            clone.val($this.val());
            $this.replaceWith(clone);
        }
    });
};

Работает как шарм. Вы можете просто позвонить, $('#element').togglePassword();чтобы переключиться между ними или дать возможность «форсировать» действие, основанное на чем-то другом (например, флажок):$('#element').togglePassword($checkbox.prop('checked'));

Просто еще один вариант для всех любителей IE8, и он отлично работает в новых браузерах. Вы можете просто раскрасить текст в соответствии с фоном ввода. Если у вас есть одно поле, оно изменит цвет на черный, когда вы щелкните / сфокусируйтесь на поле. Я бы не стал использовать это на общедоступном сайте, поскольку это «запутало бы» большинство людей, но я использую его в разделе ADMIN, где только один человек имеет доступ к паролям пользователей.

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-ИЛИ-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

Это также необходимо, когда вы покинете поле, текст снова станет белым. Просто, просто, просто.

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[Другой вариант] Теперь, если у вас есть несколько полей, которые вы проверяете, все с тем же идентификатором, для которого я его использую, добавьте класс 'pass' к полям, в которых вы хотите скрыть текст. Установите поля пароля введите «текст». Таким образом, будут изменены только поля с классом «pass».

<input type="text" class="pass" id="inp_2" value="snoogle"/>

$('[id^=inp_]').click(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#000000');
    }
    // rest of code
});

Вот вторая часть этого. Это изменит текст обратно на белый после того, как вы покинете поле.

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

Я просто сделал следующее, чтобы изменить тип входа:

$('#ID_of_element')[0].type = 'text';

и это работает.

Мне нужно было сделать это, потому что я использовал средства выбора даты jQuery UI в проекте ASP NET Core 3.1, и они не работали должным образом в браузерах на основе Chromium (см. Https://stackoverflow.com/a/61296225/7420301 ).