thay đổi loại trường đầu vào với jQuery

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

Điều này được cho là để thay đổi trường #passwordđầu vào (với id="password") là type passwordtrường văn bản bình thường, sau đó điền vào văn bản Mật khẩu mật khẩu.

Nó không hoạt động, mặc dù. Tại sao?

Đây là mẫu:

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

Rất có khả năng hành động này bị ngăn chặn như là một phần của mô hình bảo mật của trình duyệt.

Chỉnh sửa: thực sự, thử nghiệm ngay bây giờ trong Safari, tôi gặp lỗi type property cannot be changed .

Chỉnh sửa 2: đó dường như là một lỗi ngay từ jQuery. Sử dụng mã DOM thẳng sau đây hoạt động tốt:

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

Chỉnh sửa 3: Trực tiếp từ nguồn jQuery, điều này dường như có liên quan đến IE (và có thể là một lỗi hoặc một phần của mô hình bảo mật của họ, nhưng jQuery không cụ thể):

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

Thậm chí dễ dàng hơn ... không cần thiết cho tất cả việc tạo phần tử động. Chỉ cần tạo hai trường riêng biệt, tạo một trường mật khẩu 'thực' (loại = "mật khẩu") và một trường mật khẩu 'giả' (loại = "văn bản"), đặt văn bản trong trường giả thành màu xám nhạt và đặt giá trị ban đầu thành 'Mật khẩu'. Sau đó thêm một vài dòng Javascript với jQuery như dưới đây:

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

Vì vậy, khi người dùng nhập vào trường mật khẩu 'giả', nó sẽ bị ẩn, trường thực sẽ được hiển thị và tiêu điểm sẽ chuyển sang trường thực. Họ sẽ không bao giờ có thể nhập văn bản trong trường giả mạo.

Khi người dùng rời khỏi trường mật khẩu thực, tập lệnh sẽ xem nó có trống không và nếu có thì sẽ ẩn trường thật và hiển thị trường giả.

Cẩn thận không chừa một khoảng trống giữa hai thành phần đầu vào vì IE sẽ định vị một chút sau phần tử kia (hiển thị khoảng trắng) và trường sẽ xuất hiện để di chuyển khi người dùng vào / thoát nó.

Giải pháp một bước

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

Ngày nay, bạn chỉ có thể sử dụng

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

Nhưng tất nhiên, bạn thực sự nên làm điều này

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

trong tất cả trừ IE. Có những miếng giữ chỗ ngoài kia để bắt chước chức năng đó trong IE.

Một giải pháp đa trình duyệt khác, tôi hy vọng ý chính của việc này sẽ giúp được ai đó ngoài kia.

Giải pháp này cố gắng đặt typethuộc tính và nếu thất bại, nó chỉ đơn giản tạo một thuộc tính mới<input> phần tử , bảo toàn các thuộc tính phần tử và xử lý sự kiện.

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

Điều này làm việc cho tôi.

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

Một cách cuối cùng để sử dụng jQuery:

Để trường nhập ban đầu ẩn khỏi màn hình.

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

Tạo trường đầu vào mới một cách nhanh chóng bằng JavaScript.

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

Di chuyển ID và giá trị từ trường đầu vào ẩn sang trường đầu vào mới.

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

Để khắc phục lỗi trên IE như type property cannot be changed , bạn có thể thấy điều này hữu ích như tin tưởng:

Đính kèm sự kiện nhấp / tập trung / thay đổi vào thành phần đầu vào mới, để kích hoạt cùng một sự kiện trên đầu vào ẩn.

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

Phần tử đầu vào ẩn cũ vẫn nằm trong DOM nên sẽ phản ứng với sự kiện được kích hoạt bởi phần tử đầu vào mới. Khi ID được hoán đổi, phần tử đầu vào mới sẽ hoạt động giống như phần tử cũ và trả lời bất kỳ lệnh gọi chức năng nào đối với ID của đầu vào bị ẩn cũ, nhưng trông khác nhau.

Một chút khó khăn nhưng CÔNG VIỆC !!! ;-)

Bạn đã thử sử dụng .prop () chưa?

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

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

Tôi chưa thử nghiệm trên IE (vì tôi cần điều này cho một trang web iPad) - một hình thức tôi không thể thay đổi HTML nhưng tôi có thể thêm JS:

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

(JS trường học cũ là xấu xí bên cạnh tất cả các jQuery!)

Nhưng, http://bugs.jquery.com/ticket/1957 liên kết với MSDN: "Kể từ Microsoft Internet Explorer 5, thuộc tính loại được đọc / ghi một lần, nhưng chỉ khi một phần tử đầu vào được tạo bằng phương thức createEuity và trước khi nó được thêm vào tài liệu. " Vì vậy, có lẽ bạn có thể nhân đôi thành phần, thay đổi loại, thêm vào DOM và xóa cái cũ?

Chỉ cần tạo một trường mới để bỏ qua điều bảo mật này:

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

Tôi đã nhận được thông báo lỗi tương tự trong khi thử làm điều này trong Firefox 5.

Tôi đã giải quyết nó bằng cách sử dụng mã dưới đây:

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

Và để sử dụng nó, chỉ cần đặt các thuộc tính onF Focus và onBlur của các trường của bạn thành một cái gì đó như sau:

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

Tôi cũng sử dụng nó cho một trường tên người dùng, vì vậy nó sẽ thay đổi giá trị mặc định. Chỉ cần đặt tham số thứ hai của hàm thành '' khi bạn gọi nó.

Ngoài ra, có thể đáng lưu ý rằng loại mặc định của trường mật khẩu của tôi thực sự là mật khẩu, chỉ trong trường hợp người dùng không bật javascript hoặc nếu có lỗi, cách đó mật khẩu của họ vẫn được bảo vệ.

Hàm $ (document). Yet là jQuery và tải khi tài liệu tải xong. Điều này sau đó thay đổi trường mật khẩu thành một trường văn bản. Rõ ràng bạn sẽ phải thay đổi 'password_field_id' thành id trường mật khẩu của bạn.

Hãy sử dụng và sửa đổi mã!

Hy vọng điều này sẽ giúp tất cả những người có cùng một vấn đề tôi đã làm :)

- Kent Kent

EDIT: Giải pháp tốt nhưng không tuyệt đối. Hoạt động trên FF8 và IE8 NHƯNG không hoàn toàn trên Chrome (16.0.912,75 ver). Chrome không hiển thị văn bản Mật khẩu khi tải trang. Ngoài ra - FF sẽ hiển thị mật khẩu của bạn khi bật tự động điền.

Giải pháp đơn giản cho tất cả những ai muốn chức năng trong tất cả các trình duyệt:

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

Loại thuộc tính không thể thay đổi, bạn cần thay thế hoặc phủ lớp đầu vào bằng kiểu nhập văn bản và gửi giá trị đến mật khẩu đầu vào khi gửi.

Tôi đoán bạn có thể sử dụng hình nền có chứa từ "mật khẩu" và thay đổi lại thành hình nền trống trên .focus() .

.blur() ----> hình ảnh với "mật khẩu"

.focus() -----> hình ảnh không có "mật khẩu"

Bạn cũng có thể làm điều đó với một số CSS và jQuery. Có một trường văn bản hiển thị chính xác ở trên cùng của trường mật khẩu, ẩn () là tiêu điểm () và tập trung vào trường mật khẩu ...

Hãy thử bản
Demo này tại đây

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

Nó hoạt động dễ dàng hơn nhiều với điều đó:

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

và để quay lại trường mật khẩu một lần nữa, ( giả sử trường mật khẩu là thẻ đầu vào thứ 2 với loại văn bản ):

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

Điều này làm việc cho tôi.

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

sử dụng cái này nó rất dễ

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

Điều này sẽ làm các mẹo. Mặc dù nó có thể được cải thiện để bỏ qua các thuộc tính hiện không liên quan.

Cắm vào:

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

Sử dụng:

$(":submit").changeType("checkbox");

Vĩ cầm:

http://jsfiddle.net/joshcomley/yX23U/

Đơn giản thế này:

this.type = 'password';

nhu la

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

Điều này giả sử rằng trường nhập của bạn đã được đặt thành "văn bản" trước khi sử dụng.

Đây là một đoạn nhỏ cho phép bạn thay đổi các typeyếu tố trong tài liệu.

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

Nó khắc phục vấn đề bằng cách xóa inputtài liệu khỏi tài liệu, thay đổi typevà sau đó đưa nó trở lại vị trí ban đầu.

Lưu ý rằng đoạn mã này chỉ được thử nghiệm cho trình duyệt WebKit - không đảm bảo cho bất kỳ điều gì khác!

Đây là một phương pháp sử dụng một hình ảnh bên cạnh trường mật khẩu để chuyển đổi giữa việc xem mật khẩu (nhập văn bản) và không nhìn thấy nó (nhập mật khẩu). Tôi sử dụng hình ảnh "mắt mở" và "mắt nhắm", nhưng bạn có thể sử dụng bất cứ thứ gì phù hợp với mình. Cách thức hoạt động của nó là có hai đầu vào / hình ảnh và khi nhấp vào hình ảnh, giá trị được sao chép từ đầu vào hiển thị sang đầu vào ẩn, và sau đó tầm nhìn của chúng bị tráo đổi. Không giống như nhiều câu trả lời khác sử dụng tên mã hóa cứng, câu trả lời này đủ chung để sử dụng nó nhiều lần trên một trang. Nó cũng xuống cấp một cách duyên dáng nếu JavaScript không có sẵn.

Đây là những gì hai trong số này trông giống như trên một trang. Trong ví dụ này, Mật khẩu-A đã được tiết lộ bằng cách nhấp vào mắt của nó.

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

Tôi thích cách này, để thay đổi loại phần tử đầu vào: old_input.clone () .... Đây là một ví dụ. Có một hộp kiểm "id_select_multipl". Nếu điều này được thay đổi thành "được chọn", các yếu tố đầu vào có tên "foo" sẽ được thay đổi thành hộp kiểm. Nếu nó không được kiểm tra, chúng sẽ trở thành nút radio một lần nữa.

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

đây là một giải pháp 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;

Tôi đã tạo một tiện ích mở rộng jQuery để chuyển đổi giữa văn bản và mật khẩu. Hoạt động trong IE8 (có thể là 6 & 7, nhưng chưa được thử nghiệm) và sẽ không mất giá trị hoặc thuộc tính của bạn:

$.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);
        }
    });
};

Hoạt động như một lá bùa. Bạn chỉ có thể gọi $('#element').togglePassword();để chuyển đổi giữa hai hoặc đưa ra một tùy chọn để 'buộc' hành động dựa trên một thứ khác (như hộp kiểm):$('#element').togglePassword($checkbox.prop('checked'));

Chỉ là một tùy chọn khác cho tất cả những người yêu thích IE8 và nó hoạt động hoàn hảo trong các trình duyệt mới hơn. Bạn chỉ có thể tô màu văn bản cho phù hợp với nền của đầu vào. Nếu bạn có một trường duy nhất, điều này sẽ thay đổi màu thành màu đen khi bạn nhấp / tập trung vào trường. Tôi sẽ không sử dụng điều này trên một trang web công cộng vì nó sẽ 'gây nhầm lẫn' cho hầu hết mọi người, nhưng tôi đang sử dụng nó trong phần ADMIN nơi chỉ có một người có quyền truy cập vào mật khẩu của người dùng.

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-HOẶC LÀ-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

Điều này, cũng cần thiết, sẽ thay đổi văn bản trở lại màu trắng khi bạn rời khỏi trường. Đơn giản, đơn giản, đơn giản.

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[Tùy chọn khác] Bây giờ, nếu bạn có một số trường mà bạn đang kiểm tra, tất cả đều có cùng một ID, như tôi đang sử dụng, hãy thêm một lớp 'vượt qua' vào các trường bạn muốn ẩn văn bản. trường mật khẩu gõ vào 'văn bản'. Theo cách này, chỉ các trường có lớp 'vượt qua' sẽ được thay đổi.

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

Đây là phần thứ hai của điều này. Điều này thay đổi văn bản trở lại màu trắng sau khi bạn rời khỏi trường.

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

Tôi chỉ làm như sau để thay đổi loại đầu vào:

$('#ID_of_element')[0].type = 'text';

Và nó hoạt động.

Tôi cần phải làm điều này bởi vì tôi đang sử dụng bộ tạo ngày của UI UI trong dự án ASP NET Core 3.1 và chúng không hoạt động chính xác trên các trình duyệt dựa trên Chromium (xem: https://stackoverflow.com/a/61296225/7420301 ).