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

Это должно изменить поле ввода #passwordid="password" является еще одной относительно традиционной структурой модульного тестирования. typepassword на обычное текстовое поле, и затем заполните текст «Пароль».

Однако он не работает. Почему?

Вот форма:

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

Весьма вероятно, что это действие предотвращено как часть модели безопасности браузера. { *} Edit: действительно, тестируя прямо сейчас в Safari, я получаю ошибку

Edit 3: прямо из источника jQuery, это, похоже, связано с IE (и может быть либо ошибкой, либо частью их модели безопасности, но JQuery не является конкретным): 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';

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

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

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

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

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

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

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

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

changeTypeAttr.js ( Это работает для меня. ):

/* 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;
    }
}

Лучший способ использовать jQuery:

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

Оставьте исходное поле ввода скрытым от экрана.


Создать новое поле ввода на лету с помощью JavaScript.

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

Перенос идентификатора и значения из скрытого поля ввода в новое поле ввода.

var new_input = document.createElement("input");

Чтобы обойти ошибку в IE, например

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

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

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

(Old school JS ужасен рядом со всеми jQuery!)

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

http://bugs.jquery.com/ticket/1957

Он был добавлен, а затем объявлен устаревшим в JavaScript, но ECMAScript полностью его исключил , Некоторые браузеры (Mozilla, IE) всегда поддерживали его и не планируют удалять поддержку на карте. Другие (Safari, Opera) приняли его поддержку, но поддержка в старых браузерах ненадежна. ссылается на MSDN: «Начиная с Microsoft Internet Explorer 5, свойство type доступно только для чтения / записи, но только когда элемент ввода создается с помощью метода createElement и до того, как он добавлен в документ. » так что, возможно, вы могли бы продублировать элемент, изменить тип, добавить в DOM и удалить старый? Вы пытались использовать .prop ()?

Я получил то же сообщение об ошибке при попытке сделать это в Firefox 5.

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

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

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

является экземпляром

<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() —- & Gt ; изображении с помощью «» пароль «

.focus() —— & gt ; изображение без» пароля «

Вы также можете сделать это с некоторыми 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')

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

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

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

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/

Просто так:

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

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

Это похоже на

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

Просто добавьте параметр crossOrigin: true

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