IE8 的 Javascript 占位符不起作用 [重复]答案

【问题标题】：Javascript placeholder for IE8 is not working [duplicate]IE8 的 Javascript 占位符不起作用 [重复]
【发布时间】：2013-12-17 21:38:18
【问题描述】：

我正在尝试为 IE7、IE8 和 IE9 提供占位符解决方法。从互联网上的代码中，我找到了 javascript，并尝试使用这样的简单页面对其进行测试：

<html>
<HEAD>
<script type="text/javascript">
$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});
</script>
</head>
<body>
<form>
<input class="placeholder" type="text" name="nama" placeholder="try"> 
</form>
</body>
</html>

我希望在 IE 8 上显示一个带有占位符文本“try”的输入。但它没有显示任何内容。我已经尝试了任何我可以在 javascript 代码之外尝试的东西，比如擦除 class 属性、将 complete 属性添加到 form 标记等等。但占位符似乎仍未显示。你能帮我看看这段代码有什么问题吗？我还是 javascript 和 web 编程的新手，所以这个错误对我来说可能不是很明显。

我从https://gist.github.com/hagenburger/379601得到代码

【问题讨论】：

感谢所有将此问题标记为重复的人，但事实证明，我需要的不是“这个问题在这里已经有答案：”部分或其他地方。只有两个人真正有帮助，而我需要并为我工作的解决方案实际上就像某人 (HaukurHaf) 指出的那样简单：“你的脚本运行得太早了！”我认为这比将我的问题标记为重复要容易，因为我找不到任何具有我需要的答案的“重复”问题。

标签： javascript forms input internet-explorer-8 placeholder

【解决方案1】：

只需复制此代码并将其保存为 placeholder.js。

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

仅用于一个输入

$('#myinput').placeHolder();  // just one

当浏览器不支持 HTML5 占位符属性时，我建议您在网站上的所有输入字段上实现它：

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
}

【讨论】：

【解决方案2】：

您的脚本运行到很早。您需要使用文档就绪事件来启动脚本，或者将其移动到页面底部。我更喜欢文档就绪事件。见下文：

<script type="text/javascript">
$(function() {
$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});
});
</script>

【讨论】：