jquery-showpassword.js 3.0 KB

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