在查看HTML5 Cross Browser Polyfills的“Web 表单：输入占位符”部分时，我看到的是jQuery-html5-placeholder。

我用 IE9尝试了这个演示，它看起来像是<input>用一个跨度包裹你，并用占位符文本覆盖一个标签。

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

那里还有其他垫片，但我没有全部看。其中之一，Placeholders.js，将自己宣传为“没有依赖项（因此不需要包含 jQuery，与大多数占位符 polyfill 脚本不同）。”

编辑：对于那些对“如何”和“什么”更感兴趣的人，如何创建高级 HTML5 占位符 polyfill，它会完成创建执行此操作的 jQuery 插件的过程。

此外，请参阅在 IE10 中保持占位符处于焦点上，以获取有关占位符文本如何在 IE10中消失的评论，这与 Firefox 和 Chrome 不同。不确定是否有解决此问题的方法。

我的经验中最好的一个是https://github.com/mathiasbynens/jquery-placeholder（由html5please.com推荐）。http://afarkas.github.com/webshim/demos/index.html在其更广泛的 polyfills 库中也有一个很好的解决方案。

使用 jQuery 实现，您可以在提交时轻松删除默认值。下面是一个例子：

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

我知道您正在寻找叠加层，但您可能更喜欢这条路线的简便性（现在知道我上面写的内容）。如果是这样，那么我为我自己的项目编写了它，它的效果非常好（需要 jQuery），并且只需几分钟即可为您的整个站点实现。它首先提供灰色文本，对焦时提供浅灰色，打字时提供黑色。每当输入字段为空时，它还提供占位符文本。

首先设置您的表单并在输入标签上包含您的占位符属性。

<input placeholder="enter your email here">

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

在尝试了一些建议并在 IE 中看到问题之后，这里是一个有效的方法：

https://github.com/parndt/jquery-html5-placeholder-shim/

我喜欢什么 - 你只需要包含 js 文件。无需启动它或任何东西。

• 仅适用于 IE9+

以下解决方案绑定到具有占位符属性的输入文本元素。它模拟仅适用于 IE 的占位符行为，如果未更改，则在提交时清除输入的值字段。

添加此脚本，IE 似乎支持 HTML5 占位符。

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});