2012-11-23 112 views
1

對於登錄表單,我試圖在沒有任何標籤的情況下構建它,並使用佔位符文本,以便用戶知道要輸入的內容。Jquery佔位符插件以文本形式顯示密碼

問:如何修改下面的代碼,使密碼僅顯示可讀的佔位符文本。

http://jsfiddle.net/DwAUY/

注:我也是用的密碼屏蔽插件所以這個作品像iPhone。完整的例子作爲jsfiddle。

/** 
* @preserve jquery.outofplace.js 
* HTML5 placeholders for all browsers 
* Copyright (c) 2010 timmy willison 
* Dual licensed under the MIT and GPL licenses. 
* http://timmywillison.com/licence/ 
*/ 
$.fn.outOfPlace = function (opts) { 

    opts = $.extend({ 

     // Gives you control over the submit function if needed 
     // The default function removes the placeholder before 
     // submitting the form in case the field is not required client-side 
     submit: function() { 
      $(this).find('input, textarea').each(function() { 
       var $input = $(this); 
       if($input.val() === $input.data('placeholder')) { 
        $input.val(''); 
       } 
      }); 
      return true; 
     }, 

     // The placeholder class for setting 
     // placeholder styles in your own css 
     // e.g. input.place { color: #666666; } 
     // This creates a lot more flexibility for you and 
     // keeps the js lightweight 
     placeClass: 'place' 
    }, opts); 

    /** Checks for browser autofill */ 
    function check_autofill ($input) { 
     setTimeout(function() { 
      var v = $input.val(); 
      if (v === $input.data('placeholder')) { 
       $input.addClass(opts.placeClass); 
      } else { 
       $input.removeClass(opts.placeClass); 
      } 
     }, 300); 
    } 

    return this.each(function() { 
     var $input = $(this), 
      defaultText = $input.attr('placeholder') || ''; 

     // Set the placeholder data for future reference 
     $input.data('placeholder', defaultText); 

     // Attribute no longer needed 
     $input.removeAttr('placeholder'); 

     // Focus and blurs, notice the class added and removed 
     $input.focus(function() { 
      if ($input.val() === defaultText) { 
       $input.val('').removeClass(opts.placeClass); 
      } 
     }).blur(function() { 
      if ($.trim($input.val()) === '') { 
       $input.val(defaultText).addClass(opts.placeClass); 
      } 
     }).blur() 
     // Bind the submit function 
     .closest('form').submit(opts.submit); 

     check_autofill($input); 
    }); 
}; 

回答

1

替換此位:

$('input:password').password123({ 
    character: "●" 
}); 

有了這個:

$('input:password')[0].type="text"; 

http://jsfiddle.net/DwAUY/2/

+0

不,那只是要刪除密碼屏蔽插件,甚至不能與解決問題標準密碼顯示爲***** –

+0

@JohnMagnolia將其替換爲:'$('input:passw ORD')[0] .TYPE = 「文本」;' –

相關問題