เปลี่ยนชนิดของฟิลด์อินพุตด้วย jQuery

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

เป็นไปได้มากว่าการกระทำนี้จะถูกป้องกันเป็นส่วนหนึ่งของรูปแบบความปลอดภัยของเบราว์เซอร์

แก้ไข: จริงการทดสอบในขณะนี้ใน 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";

ง่ายยิ่งขึ้น ... ไม่จำเป็นสำหรับการสร้างองค์ประกอบแบบไดนามิกทั้งหมด เพียงสร้างสองฟิลด์แยกกันสร้างฟิลด์รหัสผ่าน 'จริง' (type = "รหัสผ่าน") และอีกฟิลด์หนึ่งเป็นฟิลด์รหัสผ่าน 'ปลอม' (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()" />

ดังนั้นเมื่อผู้ใช้ป้อนฟิลด์รหัสผ่าน 'ปลอม' มันจะถูกซ่อนฟิลด์จริงจะปรากฏขึ้นและโฟกัสจะย้ายไปที่ฟิลด์จริง พวกเขาจะไม่สามารถป้อนข้อความในฟิลด์ปลอมได้

เมื่อผู้ใช้ออกจากฟิลด์รหัสผ่านจริงสคริปต์จะดูว่าว่างหรือไม่และหากเป็นเช่นนั้นจะซ่อนฟิลด์จริงและแสดงฟิลด์ปลอม

ระวังอย่าเว้นช่องว่างระหว่างองค์ประกอบการป้อนข้อมูลทั้งสองเพราะ IE จะวางตำแหน่งทีละเล็กน้อยหลังจากที่อื่น (การเรนเดอร์พื้นที่) และฟิลด์จะปรากฏขึ้นเมื่อผู้ใช้เข้า / ออก

ทางออกหนึ่งขั้นตอน

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

ทุกวันนี้คุณสามารถใช้

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

แต่แน่นอนคุณควรทำเช่นนี้จริงๆ

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

ในทั้งหมดยกเว้น IE มีตัวยึดตำแหน่งออกมาเลียนแบบการทำงานใน IE เช่นกัน

โซลูชันข้ามเบราว์เซอร์ที่มากขึ้น ... ฉันหวังว่าสิ่งสำคัญนี้จะช่วยให้ใครบางคนอยู่ที่นั่น

วิธีการแก้ปัญหานี้พยายามที่จะตั้งค่า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;
    }
}

มันใช้งานได้สำหรับฉัน

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

โอนย้าย ID และค่าจากฟิลด์อินพุตที่ซ่อนไปยังฟิลด์อินพุตใหม่

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คุณอาจพบว่ามีประโยชน์เช่นนี้:

แนบเหตุการณ์การคลิก / โฟกัส / เปลี่ยนเป็นองค์ประกอบอินพุตใหม่เพื่อเรียกใช้เหตุการณ์เดียวกันกับอินพุตที่ซ่อนอยู่

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

องค์ประกอบอินพุตเก่าที่ซ่อนอยู่ยังคงอยู่ภายใน DOM ดังนั้นจะทำปฏิกิริยากับเหตุการณ์ที่ถูกทริกเกอร์โดยองค์ประกอบอินพุตใหม่ เนื่องจาก ID ถูกสลับองค์ประกอบอินพุตใหม่จะทำหน้าที่เหมือนเก่าและตอบสนองต่อการเรียกใช้ฟังก์ชันใด ๆ ไปยัง ID ของอินพุตเก่าที่ซ่อนอยู่ แต่มีลักษณะแตกต่างกัน

ยุ่งยากเล็กน้อย แต่ใช้ได้ !!! ;-)

คุณได้ลองใช้ .prop () แล้วหรือยัง

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

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

ฉันยังไม่ได้ทดสอบใน IE (ตั้งแต่ฉันต้องการสิ่งนี้สำหรับเว็บไซต์ iPad) - แบบฟอร์มที่ฉันไม่สามารถเปลี่ยน HTML ได้ แต่ฉันสามารถเพิ่ม JS:

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

(โรงเรียนเก่า JS น่าเกลียดถัดจาก jQuery ทั้งหมด!)

แต่http://bugs.jquery.com/ticket/1957ลิงก์ไปยัง MSDN: "ในฐานะของ Microsoft Internet Explorer 5 คุณสมบัติประเภทนี้จะอ่าน / เขียนครั้งเดียว แต่เมื่อองค์ประกอบอินพุตถูกสร้างด้วยวิธีการ createElement และ ก่อนที่จะถูกเพิ่มลงในเอกสาร " ดังนั้นบางทีคุณสามารถทำซ้ำองค์ประกอบเปลี่ยนประเภทเพิ่มไปยัง DOM และลบองค์ประกอบเก่าได้หรือไม่

เพียงแค่สร้างฟิลด์ใหม่เพื่อหลีกเลี่ยงสิ่งที่ปลอดภัยนี้:

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

ฉันใช้ฟิลด์นี้เพื่อชื่อผู้ใช้ด้วยเช่นกันดังนั้นจึงเป็นการสลับค่าเริ่มต้น เพียงตั้งค่าพารามิเตอร์ที่สองของฟังก์ชันเป็น '' เมื่อคุณเรียกใช้

นอกจากนี้อาจเป็นเรื่องที่น่าสังเกตว่าเขตข้อมูลรหัสผ่านเริ่มต้นของฉันคือรหัสผ่านจริงในกรณีที่ผู้ใช้ไม่ได้เปิดใช้งานจาวาสคริปต์หรือหากมีสิ่งผิดปกติเกิดขึ้น

ฟังก์ชัน $. เอกสารพร้อมแล้วคือ jQuery และโหลดเมื่อเอกสารเสร็จสิ้นการโหลด จากนั้นเปลี่ยนฟิลด์รหัสผ่านเป็นฟิลด์ข้อความ แน่นอนคุณจะต้องเปลี่ยน 'password_field_id' เป็นรหัสของฟิลด์รหัสผ่านของคุณ

รู้สึกอิสระที่จะใช้และแก้ไขรหัส!

หวังว่านี่จะช่วยทุกคนที่มีปัญหาแบบเดียวกันกับที่ฉันทำ :)

- CJ Kent

แก้ไข: ทางออกที่ดี แต่ไม่สมบูรณ์ ใช้งานได้กับ FF8 และ IE8 BUT แต่ไม่สมบูรณ์บน Chrome (16.0.912.75 เวอร์ชั่น) 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();
    }
});

สิ่งนี้ได้ผลสำหรับฉัน

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

คุณสมบัติของประเภทไม่สามารถเปลี่ยนแปลงได้คุณต้องแทนที่หรือวางซ้อนอินพุตด้วยการป้อนข้อความและส่งค่าไปยังการป้อนรหัสผ่านเมื่อส่ง

ฉันเดาว่าคุณสามารถใช้ภาพพื้นหลังที่มีคำว่า "รหัสผ่าน" และเปลี่ยนกลับเป็นภาพพื้นหลังที่ว่างเปล่า.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+'">');
}); 

มันทำงานได้ง่ายขึ้นมากกับที่:

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

และเพื่อที่จะเปลี่ยนกลับเป็นฟิลด์รหัสผ่านอีกครั้ง ( สมมติว่าฟิลด์รหัสผ่านคือแท็กอินพุตที่ 2 พร้อมชนิดข้อความ ):

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

ใช้อันนี้ง่ายมาก

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

นี่เป็นการสมมติว่าฟิลด์อินพุตของคุณถูกตั้งค่าเป็น "text" ก่อนถึงมือ

นี่เป็นตัวอย่างข้อมูลเล็กน้อยที่ช่วยให้คุณเปลี่ยน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 เท่านั้น - ไม่รับประกันในสิ่งอื่น!

นี่คือวิธีการที่ใช้รูปภาพถัดจากฟิลด์รหัสผ่านเพื่อสลับระหว่างการดูรหัสผ่าน (การป้อนข้อความ) และไม่เห็น (การป้อนรหัสผ่าน) ฉันใช้ภาพ "เปิดตา" และ "ปิดตา" แต่คุณสามารถใช้อะไรก็ได้ที่เหมาะกับคุณ วิธีการทำงานคือมีอินพุต / ภาพสองภาพและเมื่อคลิกที่ภาพค่าจะถูกคัดลอกจากอินพุตที่มองเห็นได้ไปยังอินพุตที่ซ่อนอยู่จากนั้นการมองเห็นจะถูกสลับ ต่างจากคำตอบอื่น ๆ ที่ใช้ชื่อ hardcoded คำนี้เป็นคำทั่วไปที่สามารถใช้ได้หลายครั้งบนหน้าเว็บ นอกจากนี้ยังลดระดับอย่างงดงามหากไม่สามารถใช้งาน JavaScript ได้

นี่คือลักษณะสองอย่างนี้บนหน้าหนึ่ง ในตัวอย่างนี้รหัสผ่านถูกเปิดเผยโดยคลิกที่ตา

$(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.clone () .... นี่คือตัวอย่าง มีช่องทำเครื่องหมาย "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 ทุกคนและใช้งานได้ดีกับเบราว์เซอร์รุ่นใหม่ คุณสามารถสีข้อความให้ตรงกับพื้นหลังของอินพุต หากคุณมีฟิลด์เดียวสิ่งนี้จะเปลี่ยนสีเป็นสีดำเมื่อคุณคลิก / โฟกัสที่ฟิลด์ ฉันจะไม่ใช้สิ่งนี้ในเว็บไซต์สาธารณะเพราะมันจะ 'สับสน' คนส่วนใหญ่ แต่ฉันใช้มันในส่วน ADMIN ที่มีเพียงคนเดียวเท่านั้นที่สามารถเข้าถึงรหัสผ่านผู้ใช้

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

-หรือ-

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

สิ่งนี้ยังจำเป็นจะเปลี่ยนข้อความกลับเป็นสีขาวเมื่อคุณออกจากสนาม ง่ายเรียบง่ายเรียบง่าย

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

[ตัวเลือกอื่น] ตอนนี้ถ้าคุณมีหลายช่องที่คุณกำลังตรวจสอบทั้งหมดที่มี ID เดียวกันในขณะที่ฉันใช้งานอยู่ให้เพิ่มคลาสของ '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
});

ฉันเพิ่งทำสิ่งต่อไปนี้เพื่อเปลี่ยนประเภทของอินพุต:

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

และมันใช้งานได้

ฉันต้องทำเช่นนี้เพราะฉันใช้ jQuery UI datepickers 'ในโครงการ ASP NET Core 3.1 และพวกเขาทำงานไม่ถูกต้องบนเบราว์เซอร์ที่ใช้ Chromium (ดู: https://stackoverflow.com/a/61296225/7420301 )