Question

我正在尝试为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属性，向form标记添加完整属性，等等。但占位符似乎仍未显示。你能帮我解决这段代码有什么问题吗？我仍然是javascript和网络编程的新手，所以也许这个错误对我来说并不是很明显。

我从https://gist.github.com/hagenburger/379601

获得了代码

Answer 1

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

<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>

Answer 2

只需复制此代码并将其另存为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();
      });
  });
}

IE8的Javascript占位符无法正常工作

2 个答案: