jquery-showpassword.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /*
  2. * @name Show Password
  3. * @descripton
  4. * @version 1.3
  5. * @requires Jquery 1.5
  6. *
  7. * @author Jan Jarfalk
  8. * @author-email jan.jarfalk@unwrongest.com
  9. * @author-website http://www.unwrongest.com
  10. *
  11. * @special-thanks Michel Gratton
  12. *
  13. * @licens MIT License - http://www.opensource.org/licenses/mit-license.php
  14. */
  15. (function($){
  16. $.fn.extend({
  17. showPassword: function(c) {
  18. // Setup callback object
  19. var callback = {'fn':null,'args':{}}
  20. callback.fn = c;
  21. // Clones passwords and turn the clones into text inputs
  22. var cloneElement = function( element ) {
  23. var $element = $(element);
  24. $clone = $("<input />");
  25. // Name added for JQuery Validation compatibility
  26. // Element name is required to avoid script warning.
  27. $clone.attr({
  28. 'type' : 'text',
  29. 'class' : $element.attr('class'),
  30. 'style' : $element.attr('style'),
  31. 'size' : $element.attr('size'),
  32. 'name' : $element.attr('name')+'-clone',
  33. 'tabindex' : $element.attr('tabindex')
  34. });
  35. return $clone;
  36. };
  37. // Transfers values between two elements
  38. var update = function(a,b){
  39. b.val(a.val());
  40. };
  41. // Shows a or b depending on checkbox
  42. var setState = function( checkbox, a, b ){
  43. if(checkbox.is(':checked')){
  44. update(a,b);
  45. b.show();
  46. a.hide();
  47. } else {
  48. update(b,a);
  49. b.hide();
  50. a.show();
  51. }
  52. };
  53. return this.each(function() {
  54. var $input = $(this),
  55. $checkbox = $($input.data('typetoggle'));
  56. // Create clone
  57. var $clone = cloneElement($input);
  58. $clone.insertAfter($input);
  59. // Set callback arguments
  60. if(callback.fn){
  61. callback.args.input = $input;
  62. callback.args.checkbox = $checkbox;
  63. callback.args.clone = $clone;
  64. }
  65. $checkbox.bind('click', function() {
  66. setState( $checkbox, $input, $clone );
  67. });
  68. $input.bind('keyup', function() {
  69. update( $input, $clone )
  70. });
  71. $clone.bind('keyup', function(){
  72. update( $clone, $input );
  73. // Added for JQuery Validation compatibility
  74. // This will trigger validation if it's ON for keyup event
  75. $input.trigger('keyup');
  76. });
  77. // Added for JQuery Validation compatibility
  78. // This will trigger validation if it's ON for blur event
  79. $clone.bind('blur', function() { $input.trigger('focusout'); });
  80. setState( $checkbox, $input, $clone );
  81. if( callback.fn ){
  82. callback.fn( callback.args );
  83. }
  84. });
  85. }
  86. });
  87. })(jQuery);