змінити тип поля введення за допомогою 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 = "пароль") і одне поле "підроблене" пароль (type = "text"), встановивши текст у підробленому полі світло-сірого кольору та встановлення початкового значення на "Пароль". Потім додайте кілька рядків 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, ви можете скористатись цим, як показано нижче:

Приєднайте подію клацання / фокусування / зміни до нового елемента введення, щоб викликати ту саму подію на прихованому вході.

$(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, властивість типу читається / записується один раз, але лише тоді, коли елемент введення створюється методом 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 Kent

EDIT: Гарне рішення, але не абсолютне. Працює на 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. Повідомте, що текстове поле відображається точно над полем пароля, приховування () знаходиться на фокусі () та фокусується на полі пароля ...

Спробуйте цю
демонстрацію тут

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

Fiddle:

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". Якщо це буде змінено на "вибране", елементи введення з назвою "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');
});

-OR-

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

Це також потребує зміни тексту назад до білого, коли ви виходите з поля. Просто, просто, просто.

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

[Інший варіант] Тепер, якщо у вас є кілька полів, на які ви перевіряєте, усі з тим самим ідентифікатором, як я його використовую, додайте клас "пропуск" до полів, в яких ви хочете приховати текст. Установіть поля поля введіть "текст". Таким чином, будуть змінені лише поля з класом '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, і вони не працювали належним чином на браузерах на основі хрому (див. Https://stackoverflow.com/a/61296225/7420301 ).