如何动态更改输入类型密码以在字段内显示说明

Posted 2021-02-26

Sometime designers put form labels and instrucions into html inputs. One of the common uses is for login boxes when there’s not much space. I wrote a small jQuery plugin which dynamically replaces selected fields with fields displaying a chosen value. The replace procedure works forth and back: when the user clicks on the input field it is transformed into a ; if the user inserts some text, then the field remains masked, if he/she does not insert anything, the field is replaced again, letting the chosen value be visible again.

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