изменить тип поля ввода с помощью 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>

28 ответов


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

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

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

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

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

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


решением

$('#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, вы можете найти это полезным как belows:

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

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

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

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


Я не тестировал в 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 и удалить старый?


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

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

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


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

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

в $(документ).функция ready - это jQuery и загружается, когда документ закончил загрузку. Затем поле Пароль будет изменено на текстовое поле. Очевидно, вам придется изменить "password_field_id" на идентификатор поля пароля.

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

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

-- CJ Kent

изменить: Хорошее решение, но не абсолютное. Работает на 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();
    }
});

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


Я думаю, вы можете использовать фоновое изображение, содержащее слово "пароль", и изменить его на пустое фоновое изображение на .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+'">');
}); 

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

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

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

<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 – никаких гарантий ни на что другое!


это работает намного проще с этим:

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

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

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

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

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

How it looks

$(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.клон.)(... Вот пример. Существует флажок "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, и он отлично работает в новых браузерах. Вы можете просто раскрасить текст в соответствии с фоном ввода. Если у вас есть одно поле, это изменит цвет на черный при нажатии/фокусировке на поле. Я бы не использовал это на общедоступном сайте, так как это "запутает" большинство людей, но я использую его в разделе администратора, где только один человек имеет доступ к паролям пользователей.

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