disign.it | Jquery: visualizza / nascondi caratteri immessi in campo password | a digital sign for a best design!
A digital sign for a best design
Javascript 3.602 visualizzazioni

Jquery: visualizza / nascondi caratteri immessi in campo password

07/06/2012

Uno dei problemi più banali che capita nella costruzione di un form, è quello di immaginare un campo password che, per motivi di design o di spazio, non ha alcuna etichetta e quindi dovrebbe contenere al proprio interno l'indicazione per l'utente 'password' ma al tempo stesso al momento della digitazione mascherare i caratteri immessi. Se vogliamo inserire il label interno dovremmo utilizzare un campo testo, se vogliamo mascherare i caratteri immessi un campo password, ma in ogni caso dobbiamo rinunciare  a una delle due opzioni.

L'immensa ricchezza della rete mi ha permesso di trovare questo script Jquery che pubblico completo dei credits dell'autore, Simone Lippolis,  che permette di caricare in un primo momento un campo testo in modo da poter inserire il label interno, campo che all'input dell'utente dinamicamente diviene un campo password andando csì a mascherare i caratteri digitati!

 

Ecco lo script:

 

/***********************************************************
* txReplaceFormPassword.js
*
* Written by Simone Lippolis - http://simonelippolis.com
*
* This script is distributed under a Creative Commons - Commercial, Attribution licence
* http://creativecommons.org/licenses/by/2.5/it/
*
* Feel free to copy, edit, redistribute this script. Please, don't remove credits.
*
* If you find some bug or error, please let me know.
*
* How to use:
*
* 1. Include jquery:
* <script type="text/javascript" src="jquery.js"></script>
*
* 2. Include this script:
* <script type="text/javascript" src="txReplaceFormPassword.js"></script>
*
* 3. On document ready, invoke the plugin
*
* $(document).ready(function () {
*         $('#pwd').txReplaceFormPassword({
*            show_text : 'Password'
*        });
*     });
*
* consider '#pwd' as the object which needs to be replaced:
*
* <form action="someaction" method="post" id="formid" name="formname">
*        <input type="password" name="pwd" id="pwd" value="" />
*    </form>
*
* The 'show_text' parameters contains the text to be shown in password's
* text field.
*
***********************************************************/
 
jQuery.fn.txReplaceFormPassword = function(options) {
 var options = jQuery.extend( {
 show_text: 'Password'
 },options);
 
 function trim(txt) {
 return txt.replace(/^\s+|\s+$/g, '');
 }
 
 return this.each(function() {
 if (jQuery(this).val().length == 0) {
 
 var $pos = jQuery(this).position();
 var $style = jQuery(this).attr('style');
 var $class = jQuery(this).attr('class');
 var $size = jQuery(this).attr('size');
 var $id = jQuery(this).attr('id');
 var $name = jQuery(this).attr('name');
 
 jQuery(this).hide();
 jQuery(this).after('<input type="text" id="txgrpl-' + $id + '" name="txgrpl-' + $name + '" size="' + $size + '" style="' + $style + '" value="' + options.show_text + '" rel="' + $id + '" title="' + options.show_text + '" />');
 
 $('#txgrpl-' + $id).focus(function() {
 $(this).hide();
 var $id = $(this).attr('rel');
 $('#' + $id).show().focus();
 });
 }
 
 jQuery(this).blur(function() {
 if (trim(jQuery(this).val()) == '' || jQuery(this).val() == undefined) {
 var $id = jQuery(this).attr('id');
 jQuery(this).hide();
 $('#txgrpl-' + $id).show();
 }
 });
 });
};

← Php: detect della lingua del browser Jquery: scrolling su ancore →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.