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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

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/

Answer 4

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

Answer 5

Просто еще один вариант для всех любителей IE8, и он отлично работает в новых браузерах. Вы можете просто раскрасить текст в соответствии с фоном ввода. Если у вас есть одно поле, оно изменит цвет на черный, когда вы щелкните / сфокусируйтесь на поле. Я бы не стал использовать это на общедоступном сайте, поскольку это «запутало бы» большинство людей, но я использую его в разделе ADMIN, где только один человек имеет доступ к паролям пользователей.

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

Answer 6

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

Answer 7

вот решение 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;

Answer 8

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