Posted By

ginoplusio on 03/10/10


Tagged

form css javascript html password input type design tips


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

fenta23
candicom


How to change dynamically input type password to show description inside field


 / Published in: jQuery
 

URL: http://www.barattalo.it/2010/03/10/how-to-write-a-text-description-into-html-input-type-password/

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.

  1. /***********************************************************
  2. * txReplaceFormPassword.js
  3. *
  4. * Written by Simone Lippolis - http://simonelippolis.com
  5. *
  6. * This script is distributed under a Creative Commons - Commercial, Attribution licence
  7. * http://creativecommons.org/licenses/by/2.5/it/
  8. *
  9. * Feel free to copy, edit, redistribute this script. Please, don't remove credits.
  10. *
  11. * If you find some bug or error, please let me know.
  12. *
  13. * How to use:
  14. *
  15. * 1. Include jquery:
  16. * <script type="text/javascript" src="jquery.js"></script>
  17. *
  18. * 2. Include this script:
  19. * <script type="text/javascript" src="txReplaceFormPassword.js"></script>
  20. *
  21. * 3. On document ready, invoke the plugin
  22. *
  23. * $(document).ready(function () {
  24. *         $('#pwd').txReplaceFormPassword({
  25. *            show_text : 'Password'
  26. *        });
  27. *     });
  28. *
  29. * consider '#pwd' as the object which needs to be replaced:
  30. *
  31. * <form action="someaction" method="post" id="formid" name="formname">
  32. *        <input type="password" name="pwd" id="pwd" value="" />
  33. *    </form>
  34. *
  35. * The 'show_text' parameters contains the text to be shown in password's
  36. * text field.
  37. *
  38. ***********************************************************/
  39.  
  40. jQuery.fn.txReplaceFormPassword = function(options) {
  41. var options = jQuery.extend( {
  42. show_text: 'Password'
  43. },options);
  44.  
  45. function trim(txt) {
  46. return txt.replace(/^\s+|\s+$/g, '');
  47. }
  48.  
  49. return this.each(function() {
  50. if (jQuery(this).val().length == 0) {
  51.  
  52. var $pos = jQuery(this).position();
  53. var $style = jQuery(this).attr('style');
  54. var $class = jQuery(this).attr('class');
  55. var $size = jQuery(this).attr('size');
  56. var $id = jQuery(this).attr('id');
  57. var $name = jQuery(this).attr('name');
  58.  
  59. jQuery(this).hide();
  60. 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 + '" />');
  61.  
  62. $('#txgrpl-' + $id).focus(function() {
  63. $(this).hide();
  64. var $id = $(this).attr('rel');
  65. $('#' + $id).show().focus();
  66. });
  67. }
  68.  
  69. jQuery(this).blur(function() {
  70. if (trim(jQuery(this).val()) == '' || jQuery(this).val() == undefined) {
  71. var $id = jQuery(this).attr('id');
  72. jQuery(this).hide();
  73. $('#txgrpl-' + $id).show();
  74. }
  75. });
  76. });
  77. };

Report this snippet  

You need to login to post a comment.