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

Ответ 1

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

Изменить: действительно, тестируя сейчас в 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";

Ответ 2

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

Поэтому, когда пользователь вводит поле "поддельный" пароль, он будет скрыт, будет показано реальное поле, и фокус переместится в реальное поле. Они никогда не смогут вводить текст в поддельном поле.

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

Будьте осторожны, чтобы не оставлять пробел между двумя входными элементами, потому что IE будет позиционировать один бит за другим (рендеринг пространства), и поле будет отображаться для перемещения, когда пользователь входит/выходит из него.

Ответ 3

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

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

Ответ 4

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

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

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

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

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

Ответ 5

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

Это решение пытается установить атрибут 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;
    }
}

Ответ 6

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

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

Ответ 7

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

Немного сложно, но РАБОТАЕТ!!!; -)

Ответ 8

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

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

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

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

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

Я получил то же сообщение об ошибке при попытке сделать это в 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 версии). Chrome не отображает текст пароля при загрузке страницы. Также - FF будет отображать ваш пароль при включении автозаполнения.

Ответ 12

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

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

Ответ 13

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

Ответ 14

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

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

Ответ 15

используйте это, это очень просто

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

Ответ 16

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

Ответ 17

Вот небольшой фрагмент, который позволяет вам изменять элементы 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 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 - никаких гарантий на что-либо еще!

Ответ 18

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

Ответ 19

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

Plugin:

(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/

Ответ 20

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

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

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

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

Ответ 21

Просто это:

this.type = 'password';

таких как

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

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

Ответ 22

Это работает намного проще:

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

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

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

Ответ 23

Мне нравится этот способ, чтобы изменить тип элемента ввода: 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();
     });
    }
  )});

Ответ 24

heres решение 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;

Ответ 25

Я создал расширение 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'));

Ответ 26

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

Ответ 27

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

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