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

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

более кросс-браузерное решение... я надеюсь, что суть этого помогает кому-то там.

это решение пытается установить

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

$('#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, поэтому будет реагировать на событие, вызванное новым элементом ввода. При замене идентификатора новый элемент ввода будет действовать как старый и реагировать на любой вызов функции на старый скрытый идентификатор ввода, но выглядит по-другому.

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

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

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

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

в $(документ).готовая функция-это 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 был обнаружен, нажав на его глаз.

$(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". Если это изменено на" выбрано", элементы ввода с именем" 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
});