जब लेबल का उपयोग मूल्य के रूप में किया जा रहा है तो पासवर्ड इनपुट फ़ील्ड में स्पष्ट टेक्स्ट में पासवर्ड कैसे दिखाया जाए?

Question

मैं इनपुट कोड के रूप में लेबल का उपयोग करने के लिए नीचे दिए गए कोड का उपयोग कर रहा हूं और इस पहेली http://jsfiddle.net/peter/Xt5qu/ में भी देखा है। मैं क्या परिवर्तन कर सकता हूं ताकि पासवर्ड फ़ील्ड पर लेबल स्पष्ट टेक्स्ट में हो लेकिन जैसा कि वे टाइप करते हैं, यह छिपा हुआ है?

<form id="new_account_form" method="post" action="#" class="login-form"> 
<ul> 
<li> 
      <label for="user_email">Email address</label> 
      <input id="user_email" name="user_email" required="" class="validate[required,custom[email]] clearOnFocus login-itext" type="text"> 
      </li> 
      <li> 
      <label for="user_password">Password</label> 
      <input id="user_password" name="user_password" required="" class="validate[required,minSize[6]] clearOnFocus login-itext" type="password"> 
</li> 
<li> 

    <input name="Submit" type="submit" class="login-ibutton" value="Sign in"></li> 
</ul> 
</form> 

<script script type="text/javascript"> 
this.label2value = function(){ 

    // CSS class names 
    // put any class name you want 
    // define this in external css (example provided) 
    var inactive = "inactive"; 
    var active = "active"; 
    var focused = "focused"; 

    // function 
    $("label").each(function(){  
     obj = document.getElementById($(this).attr("for")); 
     if(($(obj).attr("type") == "text", "password") || (obj.tagName.toLowerCase() == "textarea")){   
      $(obj).addClass(inactive);   
      var text = $(this).text(); 
      $(this).css("display","none");   
      $(obj).val(text); 
      $(obj).focus(function(){  
       $(this).addClass(focused); 
       $(this).removeClass(inactive); 
       $(this).removeClass(active);         
       if($(this).val() == text) $(this).val(""); 
      }); 
      $(obj).blur(function(){ 
       $(this).removeClass(focused);              
       if($(this).val() == "") { 
        $(this).val(text); 
        $(this).addClass(inactive); 
       } else { 
        $(this).addClass(active);  
       };    
      });    
     }; 
    });  
}; 
// on load 
$(document).ready(function(){ 
    label2value(); 
}); 
</script> 

Answer 1

फिडल: http://jsfiddle.net/WqUZX/

ऐसा करने के लिए कोई तरीका नहीं है। कहें, * पासवर्ड को "छिपाने" का पात्र है। जब उस चरित्र के इनपुट, स्क्रिप्ट इसे "याद" नहीं कर सकता है। एक और समस्या तब हो सकती है जब उपयोगकर्ता स्ट्रिंग के भीतर delete या backspace कुंजी दबाता है। इनपुट बॉक्स में एक स्ट्रिंग चिपकाने से समस्याएं भी हो सकती हैं।

बेशक, आप selectionStart, selectionEnd और प्रमुख ईवेंट श्रोताओं का एक समूह का उपयोग करके ऐसी सुविधा लागू कर सकते हैं। हालांकि, यह दृष्टिकोण जलरोधक नहीं है।

निकटतम विश्वसनीय समाधान type को text पर फ़ोकस पर बदल रहा है, और धुंध पर password पर वापस जा रहा है।

$("#user_password").focus(function(){ 
    this.type = "text"; 
}).blur(function(){ 
    this.type = "password"; 
}) 

वैकल्पिक रूप से, आप mouseover का उपयोग पासवर्ड दिखाने के लिए कर सकते हैं। इस तरह, उपयोगकर्ता आसानी से चुन सकता है कि वह शो-पासवर्ड सुविधा का उपयोग करना चाहता है या नहीं।

Answer 2

आप HTML5 placeholder विशेषता का उपयोग कर सकते हैं, लेकिन बहुत से ब्राउज़र इसका समर्थन नहीं करते हैं। एक समाधान के रूप में, this JSFiddle मैंने लिखा है, जो मानक पाठ इनपुट के साथ पासवर्ड इनपुट को प्रतिस्थापित करता है, और इसके विपरीत, focus और blur ईवेंट पर।

कोड:

$(document).ready(function() { 
    $("input[name='password']").prop("type", "text").val("Password"); 
}); 

$("input[name='password']").focus(function() { 
    if($(this).val() === "Password") 
    { 
     $(this).prop("type", "password").val(""); 
    } 
}); 

$("input[name='password']").blur(function() { 
    if(!$(this).val().length) 
    { 
     $(this).prop("type", "text").val("Password"); 
    } 
}); 

इस शान से जो लोग जावास्क्रिप्ट निष्क्रिय है के लिए नीचा होगा।

Answer 3

पहिया बदलने की कोई जरूरत नहीं है अगर किसी को पहले से ही यह किया है:

http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

सिर्फ एक उदाहरण मैं एक त्वरित गूगल के साथ पाया है कि। मुझे यकीन है कि अन्य वेब विकास ब्लॉगों में से एक का क्लीनर उदाहरण भी था, लेकिन मुझे याद नहीं है कि दुर्भाग्यवश कौन सा है।

यदि आप समाधान हल करना चाहते हैं, तो आप हमेशा देख सकते हैं कि उपर्युक्त प्लगइन यह कैसे कर रहा है, और सिद्धांतों के आधार पर अपना स्वयं का समाधान विकसित करें।