jquery-showpassword.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /*
  2. * @name Show Password
  3. * @description
  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. 'autocomplete' : 'off'
  35. });
  36. if($element.attr('placeholder') !== undefined) {
  37. $clone.attr('placeholder', $element.attr('placeholder'));
  38. }
  39. return $clone;
  40. };
  41. // Transfers values between two elements
  42. var update = function(a,b){
  43. b.val(a.val());
  44. };
  45. // Shows a or b depending on checkbox
  46. var setState = function( checkbox, a, b ){
  47. if(checkbox.is(':checked')){
  48. update(a,b);
  49. b.show();
  50. a.hide();
  51. } else {
  52. update(b,a);
  53. b.hide();
  54. a.show();
  55. }
  56. };
  57. return this.each(function() {
  58. var $input = $(this),
  59. $checkbox = $($input.data('typetoggle'));
  60. // Create clone
  61. var $clone = cloneElement($input);
  62. $clone.insertAfter($input);
  63. // Set callback arguments
  64. if(callback.fn){
  65. callback.args.input = $input;
  66. callback.args.checkbox = $checkbox;
  67. callback.args.clone = $clone;
  68. }
  69. $checkbox.bind('click', function() {
  70. setState( $checkbox, $input, $clone );
  71. });
  72. $input.bind('keyup', function() {
  73. update( $input, $clone )
  74. });
  75. $clone.bind('keyup', function(){
  76. update( $clone, $input );
  77. // Added for JQuery Validation compatibility
  78. // This will trigger validation if it's ON for keyup event
  79. $input.trigger('keyup');
  80. });
  81. // Added for JQuery Validation compatibility
  82. // This will trigger validation if it's ON for blur event
  83. $clone.bind('blur', function() { $input.trigger('focusout'); });
  84. setState( $checkbox, $input, $clone );
  85. // set type of password field clone (type=text) to password right on submit
  86. // to prevent browser save the value of this field
  87. $clone.closest('form').submit(function(e) {
  88. // .prop has to be used, because .attr throws
  89. // an error while changing a type of an input
  90. // element
  91. $clone.prop('type', 'password');
  92. });
  93. if( callback.fn ){
  94. callback.fn( callback.args );
  95. }
  96. });
  97. }
  98. });
  99. })(jQuery);