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>

Comments

आप इसे क्यों बदलना चाहते हैं?

— चोसपंडियन

मैं चाहता हूं कि इनपुट में एक उपयोगकर्ता का मजबूती से 'पासवर्ड' पाठ हो ताकि उपयोगकर्ता जान सकें कि क्या भरना है (क्योंकि कोई लेबल नहीं है)।

— रिचर्ड नोप

इस वीडियो को देखें: youtube.com/watch?v=5YeSqtB0kfE

— Grijesh Chauhan

Answer 1

यह बहुत संभव है कि यह क्रिया ब्राउज़र के सुरक्षा मॉडल के भाग के रूप में रोकी गई हो।

संपादित करें: वास्तव में, सफारी में अभी परीक्षण, मुझे त्रुटि मिलती है 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";

Comments

कहना होगा, यह सबसे बेकार सुरक्षा माप है जो मैंने कभी देखा है। ऐसा प्रतीत नहीं होता है कि किसी क्षेत्र के प्रकार को जल्दी से बदलने और इसे पूरी तरह से नए के साथ बदलने के बीच बहुत अंतर है। बहुत अजीब ... वैसे भी, मेरे लिए काम किया। धन्यवाद!

इसकी सुरक्षा मॉडल सामान नहीं है, मैं पुष्टि कर सकता हूं कि यह IE7 में काम नहीं करता है, IE8 त्रुटि के साथ: प्रकार संपत्ति नहीं मिल सका

— कोड Novitiate

एक खोज पर यह जवाब मिला और यह एक बड़ी मदद थी। हालांकि, मेरा समाधान सिर्फ उस चेक को jquery से निकालना था। बढ़िया काम किया।

— माइकल

@ माइकल, मैं सीधे jQuery को बदलने के खिलाफ सिफारिश करूंगा। इसके अलावा यह एक संघर्ष की देनदारी बनाता है जो आगे बढ़ रहा है, यह जांच संभवतः एक कारण के लिए है। यदि आपको IE समर्थन के बारे में चिंता करने की आवश्यकता नहीं है, तो आप इसके बजाय एक jQuery एक्सटेंशन को लागू कर सकते हैं जो समानताएं attrदेता है लेकिन तत्वों typeपर विशेषता को बदलने की अनुमति देता है input।

— पलकविहीनता

जोड़ा गया अद्यतन 4 - आशा है कि यह चीजों को समझाने और उनके चारों ओर कैसे जाने में मदद करता है।

— क्लार्कबॉय

Answer 2

और भी आसान ... सभी गतिशील तत्व निर्माण की कोई आवश्यकता नहीं है। बस दो अलग-अलग फ़ील्ड बनाएं, जिससे एक 'वास्तविक' पासवर्ड फ़ील्ड (प्रकार = "पासवर्ड") और एक 'नकली' पासवर्ड फ़ील्ड (प्रकार = "टेक्स्ट"), नकली फ़ील्ड में पाठ को हल्के भूरे रंग में सेट करना 'पासवर्ड' के लिए प्रारंभिक मूल्य निर्धारित करना। फिर नीचे 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 उपयोगकर्ता को अंतरिक्ष में प्रवेश करने / बाहर निकलने पर स्थानांतरित करने के लिए एक के बाद एक (स्थान को रेंडर करके) थोड़ा सा स्थान देगा और क्षेत्र दिखाई देगा।

Comments

: आप के रूप में अच्छी निम्नलिखित कार्य श्रृंखला कर सकते हैं $('#password').show(); $('#password').focus();के रूप में$('#password').show().focus();

— Anriëtte माइब्रो

मेरे पास दोनों फ़ील्ड एक साथ हैं: <इनपुट प्रकार = "पाठ" /> <इनपुट प्रकार = "पासवर्ड" /> और मैं अभी भी IE (9) में एक ऊर्ध्वाधर बदलाव प्राप्त करता हूं जब वे स्वैप करते हैं। तरीकों को जंजीर करना ($ ('# पासवर्ड')। शो ()। फ़ोकस ();) से मदद नहीं मिली, लेकिन यह एक मजेदार अनुकूलन चाल थी। कुल मिलाकर यह सबसे अच्छा समाधान था।

— AVProgrammer

यदि उपयोगकर्ता किसी अन्य नियंत्रण पर ध्यान केंद्रित करता है और ऑनब्लूर पर ध्यान केंद्रित करता है तो ध्यान नकली पासवर्ड फ़ील्ड पर वापस जाएगा

— एलन चुआ

आपको उपयोग करना चाहिए: अगर ($ (# पासवर्ड))। वैल () == '') {के बजाय: अगर ($ (# पासवर्ड))। Attr ('' value ') ==' '') {अन्यथा पासवर्ड मान हमेशा 'पासवर्ड' ऑनब्लूर प्रदर्शित करेगा।

— स्टीफन पॉल

Answer 3

एक कदम समाधान

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

Comments

document.getElementByIdपर्याप्त होना चाहिए और आपको इसके लिए jQuery की आवश्यकता नहीं है! ;-)

— गैंडारो

दरअसल, सवाल के मुताबिक, यह jQuery समाधान था।

— साकेत साहू

या इससे भी छोटा, $ ('# पासवर्ड') [0] .type = 'text';

— साकेत साहू

यह IE9 के साथ समस्याएँ पैदा कर सकता है, प्रकार अपरिभाषित है। हालांकि अन्य ब्राउज़रों के लिए बढ़िया है।

— kravits88

अगर आप "पासवर्ड" से टाइप को "टेक्स्ट" में बदलने की कोशिश करते हैं तो IE 8 वास्तव में एक एरर फेंक देगा। त्रुटि कहती है "प्रकार की संपत्ति प्राप्त नहीं कर सका। यह आदेश समर्थित नहीं है।"

— allieferr

Answer 4

आजकल, आप बस उपयोग कर सकते हैं

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

लेकिन निश्चित रूप से, आपको वास्तव में ऐसा करना चाहिए

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

सभी में लेकिन IE। वहाँ प्लेसहोल्डर shims है कि IE में भी कार्यक्षमता की नकल करने के लिए।

Comments

का jsFiddle डेमोplaceholder="Password" । एचटीएमएल कल्पना और MDN पर placeholderविशेषता। एक के लिए जावास्क्रिप्ट शिमplaceholder ।

— रोरी ओ'केन

IE 8 अब मर चुका है। लंबे समय तक लाइव देशी HTML समाधान। अपने प्लेसहोल्डर को दूर फेंको और जश्न मनाओ।

— एंड्रयू

Answer 5

एक और अधिक क्रॉस-ब्राउज़र समाधान ... मुझे आशा है कि इसका सार किसी को वहाँ से बाहर निकालने में मदद करता है।

यह समाधान typeविशेषता को सेट करने की कोशिश करता है , और यदि यह विफल हो जाता है, तो यह बस एक नया <input>तत्व बनाता है , तत्व विशेषताओं और घटना संचालकों को संरक्षित करता है।

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

Comments

यह सिर्फ बहुत बुरा है, अगर हर कोई एफ ... यह कहता है, तो कुछ भी काम नहीं करेगा, इसे क्रॉस ब्राउज़र पर काम करना चाहिए या बिल्कुल नहीं।

— वैल

Gists की बात करते हुए ... आपको इस कोड के लिए एक बनाना चाहिए। gist.github.com

— क्रिस्टोफर पार्कर

Answer 6

यह मेरे लिए काम करता है।

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

Comments

धन्यवाद! यह उन मुद्दों को हल करता है जो मैं IE में काम नहीं करने वाले अन्य उत्तरों के साथ कर रहा था। बस याद रखें कि यह एक नई वस्तु है, इसलिए यदि आप $ ('# पासवर्ड') को एक चर में संग्रहीत करते हैं, तो आपको इसे DOM से फिर से पकड़ना होगा।

— kravits88

यह IE8 में काम नहीं करता है। आपको अभी भी "टाइप प्रॉपर्टी नहीं बदली जा सकती" त्रुटि मिलती है।

— जिकोफेल्ड

Answer 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

जावास्क्रिप्ट द्वारा मक्खी पर नया इनपुट क्षेत्र बनाएँ।

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, आपको यह उपयोगी मिल सकता है:

छिपे हुए इनपुट पर उसी घटना को ट्रिगर करने के लिए, नए इनपुट तत्व पर क्लिक / फोकस / इवेंट बदलें।

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

पुराना छिपा इनपुट तत्व अभी भी DOM के अंदर है इसलिए नए इनपुट तत्व द्वारा ट्रिगर की गई घटना के साथ प्रतिक्रिया करेगा। जैसे ही आईडी की अदला-बदली होती है, नया इनपुट तत्व पुराने की तरह काम करेगा और पुराने छिपे इनपुट की आईडी के लिए किसी भी फ़ंक्शन कॉल का जवाब देगा, लेकिन अलग दिखता है।

थोड़ा सा मुश्किल लेकिन काम करता है !!! ;-)

Answer 8

क्या आपने .prop () का उपयोग करने की कोशिश की है?

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

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

Comments

कॉर्डोवा 6 वेबव्यू में काम करता है

— जोएल कैटन

Answer 9

मैंने IE में परीक्षण नहीं किया है (क्योंकि मुझे आईपैड साइट के लिए इसकी आवश्यकता थी) - एक ऐसा रूप जिसे मैं HTML नहीं बदल सकता था लेकिन मैं JS जोड़ सकता था:

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

(पुराने स्कूल जेएस सभी jQuery के बगल में बदसूरत है!)

लेकिन, MSDN से http://bugs.jquery.com/ticket/1957 लिंक: "Microsoft इंटरनेट एक्सप्लोरर 5 के अनुसार, प्रकार की संपत्ति पढ़ी जाती है / लिखी जाती है, लेकिन केवल तभी जब इनपुट तत्व createElement विधि के साथ बनाया जाता है और इससे पहले कि इसे दस्तावेज़ में जोड़ा जाए। " तो शायद आप तत्व को डुप्लिकेट कर सकते हैं, प्रकार बदल सकते हैं, डोम में जोड़ सकते हैं और पुराने को हटा सकते हैं?

Answer 10

बस इस सुरक्षा चीज़ को बायपास करने के लिए एक नया क्षेत्र बनाएँ:

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

Answer 11

फ़ायरफ़ॉक्स 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 है, और जब दस्तावेज़ लोड हो रहा है तो लोड हो जाता है। इसके बाद पासवर्ड फ़ील्ड को टेक्स्ट फ़ील्ड में बदल देता है। जाहिर है आपको's password_field_id ’को अपने पासवर्ड फ़ील्ड की आईडी में बदलना होगा।

कोड का उपयोग करने और संशोधित करने के लिए स्वतंत्र महसूस करें!

आशा है कि यह हर किसी की मदद करता है जो मेरे पास एक ही समस्या थी :)

- सीजे केंट

संपादित करें: अच्छा समाधान लेकिन निरपेक्ष नहीं। FF8 और IE8 BUT पर पूरी तरह से Chrome पर काम नहीं करता (16.0.912.75 ver)। पृष्ठ लोड होने पर Chrome पासवर्ड पाठ प्रदर्शित नहीं करता है। इसके अलावा - ऑटोफिल चालू होने पर एफएफ आपके पासवर्ड को प्रदर्शित करेगा।

Answer 12

उन सभी के लिए सरल समाधान जो सभी ब्राउज़रों में कार्यक्षमता चाहते हैं:

एचटीएमएल

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

Answer 13

यह मेरे लिए काम किया।

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

Answer 14

टाइप गुणों को बदला नहीं जा सकता है, आपको टेक्स्ट इनपुट के साथ इनपुट को बदलने या ओवरले करने की आवश्यकता है और सबमिट पर पासवर्ड इनपुट के लिए मूल्य भेजें।

Answer 15

मुझे लगता है कि आप एक पृष्ठभूमि-छवि का उपयोग कर सकते हैं जिसमें "पासवर्ड" शब्द शामिल है और इसे एक खाली पृष्ठभूमि-छवि पर वापस बदल दें .focus()।

.blur() ----> छवि "पासवर्ड" के साथ

.focus() -----> छवि जिसमें "पासवर्ड" नहीं है

आप इसे कुछ CSS और jQuery के साथ भी कर सकते हैं। पासवर्ड फ़ील्ड के शीर्ष पर एक टेक्स्ट फ़ील्ड दिखाएं, छिपाना () फोकस पर है () और पासवर्ड फ़ील्ड पर ध्यान केंद्रित करें ...

Answer 16

इस डेमो कोशिश
यहाँ है

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

Answer 17

यह उसके साथ बहुत आसान काम करता है:

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

और इसे फिर से पासवर्ड फ़ील्ड में वापस लाने के लिए, ( पासवर्ड फ़ील्ड को पाठ प्रकार के साथ दूसरा इनपुट टैग माना जाता है ):

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

Answer 18

इस का उपयोग करें यह बहुत आसान है

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

Answer 19

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

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

Answer 21

यह चाल चलेगा। यद्यपि यह उन विशेषताओं को अनदेखा करने के लिए सुधार किया जा सकता है जो अब अप्रासंगिक हैं।

लगाना:

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

Answer 22

बस यह:

this.type = 'password';

जैसे कि

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

यह मान रहा है कि आपका इनपुट फ़ील्ड हाथ से पहले "टेक्स्ट" पर सेट किया गया था।

Answer 23

यहां थोड़ा सा स्निपेट है जो आपको typeदस्तावेजों में तत्वों को बदलने की अनुमति देता है ।

jquery.type.js( गिटहब गिस्ट ):

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 ब्राउज़रों के लिए परीक्षण किया गया था - किसी और चीज़ पर कोई गारंटी नहीं!

Comments

दरअसल, यह भूल जाते हैं कि - delete jQuery.attrHooks.typeइनपुट के विशेष प्रकार के jQuery को हटाने के लिए उपयोग करें।

— जेबी

Answer 24

यहां एक विधि है जो पासवर्ड (पाठ इनपुट) को देखने और इसे न देखने (पासवर्ड इनपुट) के बीच टॉगल करने के लिए पासवर्ड फ़ील्ड के बगल में एक छवि का उपयोग करती है। मैं एक "खुली आंख" और "बंद आंख" छवि का उपयोग करता हूं, लेकिन आप जो भी सूट करते हैं उसका उपयोग कर सकते हैं। जिस तरह से यह काम करता है, उसमें दो इनपुट / चित्र होते हैं और छवि पर क्लिक करने पर, मूल्य को दृश्य इनपुट से छिपे हुए एक में कॉपी किया जाता है, और फिर उनकी दृश्यता अदला-बदली होती है। कई अन्य उत्तरों के विपरीत जो हार्डकोड नामों का उपयोग करते हैं, यह एक पृष्ठ पर कई बार उपयोग करने के लिए सामान्य है। यदि जावास्क्रिप्ट अनुपलब्ध है, तो यह इनायत से अपमानित भी करता है।

यहाँ एक पृष्ठ पर इनमें से दो किस तरह दिखते हैं। इस उदाहरण में, पासवर्ड-ए को उसकी आंख पर क्लिक करके प्रकट किया गया है।

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

मुझे इस तरह से, इनपुट तत्व के प्रकार को बदलना पसंद है: old_input.clone () .... यहाँ एक उदाहरण है। एक चेक बॉक्स "id_select_multiple" है। यदि इसे "चयनित" में बदल दिया जाता है, तो चेक बॉक्स के नाम "फू" वाले इनपुट तत्वों को बदल दिया जाना चाहिए। यदि यह अनियंत्रित हो जाता है, तो उन्हें फिर से रेडियो बटन बनना चाहिए।

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

Comments

यह IE8 में काम नहीं करता है। आपको अभी भी "टाइप प्रॉपर्टी नहीं बदली जा सकती" त्रुटि मिलती है।

— jcoffland

Answer 26

एक डोम समाधान heres

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 27

मैंने टेक्स्ट और पासवर्ड के बीच टॉगल करने के लिए एक 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'));

Answer 28

सभी IE8 प्रेमियों के लिए बस एक और विकल्प, और यह नए ब्राउज़रों में एकदम सही काम करता है। आप इनपुट की पृष्ठभूमि से मिलान करने के लिए केवल पाठ को रंग सकते हैं। यदि आपके पास एक एकल फ़ील्ड है, तो जब आप फ़ील्ड पर क्लिक / फ़ोकस करेंगे, तो यह रंग बदलकर काला हो जाएगा। मैं इसका उपयोग किसी सार्वजनिक साइट पर नहीं करूंगा क्योंकि यह अधिकांश लोगों को भ्रमित करेगा, लेकिन मैं इसे ADMIN अनुभाग में उपयोग कर रहा हूं जहां केवल एक व्यक्ति के पास उपयोगकर्ता पासवर्ड है।

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

-या-

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

यह भी आवश्यक है, जब आप मैदान छोड़ देंगे तो पाठ वापस सफेद में बदल जाएगा। सहज, सरल, सरल।

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

[एक अन्य विकल्प] अब, यदि आपके पास कई फ़ील्ड हैं, जिन्हें आप एक ही आईडी के साथ, सभी के लिए जाँच रहे हैं, जैसा कि मैं इसके लिए उपयोग कर रहा हूं, तो उन फ़ील्ड में 'पास' की एक कक्षा जोड़ें जो आप पाठ को छिपाना चाहते हैं। पासवर्ड फ़ील्ड 'पाठ' के लिए टाइप करते हैं। इस तरह, केवल 'पास' के वर्ग वाले क्षेत्रों को बदल दिया जाएगा।

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

मैंने इनपुट के प्रकार को बदलने के लिए निम्नलिखित कार्य किया:

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

और यह काम करता है।

मुझे ऐसा करने की आवश्यकता थी क्योंकि मैं एएसपी नेट कोर 3.1 प्रोजेक्ट में jQuery UI डेटपिकर का उपयोग कर रहा था और वे क्रोमियम-आधारित ब्राउज़र पर ठीक से काम नहीं कर रहे थे (देखें: https://stackoverflow.com/a/61296225/740101 )।