javascript – 在IE中显示密码字段的占位符文本

前端之家收集整理的这篇文章主要介绍了javascript – 在IE中显示密码字段的占位符文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道有很多占位符问题,但我想完善我的.

我当前的代码工作得很好并且做了它应该做的事情.问题是,当我去放置“密码”占位符时,它会将占位符放在屏蔽字符中.关于如何解决这个问题的任何想法?

  1. $(function() {
  2. if(!$.support.placeholder) {
  3. var active = document.activeElement;
  4. $(':text').focus(function () {
  5. if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  6. $(this).val('').removeClass('hasPlaceholder');
  7. }
  8. }).blur(function () {
  9. if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  10. $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  11. }
  12. });
  13. $(':text').blur();
  14. $(active).focus();
  15. $('form').submit(function () {
  16. $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
  17. });
  18.  
  19. var active = document.activeElement;
  20. $(':password').focus(function () {
  21. if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  22. $(this).val('').removeClass('hasPlaceholder');
  23. }
  24. }).blur(function () {
  25. if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  26. $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  27. }
  28. });
  29. $(':password').blur();
  30. $(active).focus();
  31. $('form').submit(function () {
  32. $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
  33. });
  34. }
  35. });

我的传球场:

  1. <div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>

解决方法

您也可以尝试这个…它检测到浏览器不支持占位符并适用于所有输入类型
  1. function FauxPlaceholder() {
  2. if(!ElementSupportAttribute('input','placeholder')) {
  3. $("input[placeholder]").each(function() {
  4. var $input = $(this);
  5. $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
  6. var $faux = $('#'+$input.attr('id')+'-faux');
  7.  
  8. $faux.show().attr('class',$input.attr('class')).attr('style',$input.attr('style'));
  9. $input.hide();
  10.  
  11. $faux.focus(function() {
  12. $faux.hide();
  13. $input.show().focus();
  14. });
  15.  
  16. $input.blur(function() {
  17. if($input.val() === '') {
  18. $input.hide();
  19. $faux.show();
  20. }
  21. });
  22. });
  23. }
  24. }
  25. function ElementSupportAttribute(elm,attr) {
  26. var test = document.createElement(elm);
  27. return attr in test;
  28. }

猜你在找的JavaScript相关文章