在本机不支持“占位符”属性的浏览器中模拟“占位符”属性的最准确方法是什么？

最近我一直在寻找 jquery/javascript 解决方案来模拟placeholder属性，但似乎没有一个是正确的。常见问题有：

• 首先不使用原生浏览器支持
• 表单实际上可能会发布占位符文本的值
• 如果值相同，则无法识别占位符文本和用户输入（嘿，我的电子邮件是[电子邮件受保护] /cdn-cgi/l/email-protection!!为什么不提交？嘿，我想搜索字符串“Search”，但它不允许我搜索！）
• 难以设计样式或区分常规文本和占位符文本
• 强制实施（几乎总是如此。我不想为每个输入添加 2 个 div 和一个样式表来执行此操作）
• 就是行不通。 jQuery 网站上至少有 2 个。

我已经尝试过一些尝试让它正常工作（从我已经看到的一些代码中获取一些提示），但它仍然需要工作。特别地，表格可以发布占位符的值。欢迎对 jsfiddle 发表评论和修改 http://jsfiddle.net/At8cu/. （注：演示必须在不支持占位符的浏览器中查看）我见过的大多数代码都采用的值placeholder并将其填充到输入本身中，这导致了这个问题，我觉得必须有更好的方法。

有没有一个干净的解决方案实际上有效?

编辑：我想强调这一点：它的行为方式应该像您在浏览器中看到的那样，尽可能地原生支持它，并且尽可能un尽可能地引人注目，如我当前的代码所示，除了包含脚本并使用placeholder就像您通常对支持它的浏览器所做的那样。

更新：@DA 当前的解决方案是一些错误修复，距离完美还很远（请参阅评论），希望看到它 100% 地结合在一起，并将所有糟糕的和有错误的代码放到网络上以示羞耻。

更新：使用 DA 代码的几个 mods 可以实现此功能，但它仍然不完美，主要是关于动态添加的输入字段和现有的submit()绑定。感谢您的帮助，我现在决定不值得。我知道有一些人肯定会使用这个。这是一个很好的技巧，但对我来说，表单提交执行不符合预期的操作或错误读取用户输入的可能性甚至不值得 1%。这个小功能根本不值得头疼，IE和朋友们可以处理它，或者如果确实需要的话，比如客户需要的话，可以根据具体情况实现。 @DA 再次感谢，这是我见过的最好的实现。

结论：我认为克服所有这些问题的唯一方法是：

• 将占位符值复制到新的块级元素
• 将新元素添加到输入之前
• 计算输入的高度边框和填充，并将新元素移动到其上，尽可能靠近文本出现的位置
• 当输入有值或聚焦时，使用标准模糊/更改/焦点事件隐藏元素

这样您就不必在提交时执行任何操作或处理可能发生的任何其他问题。抱歉，还没有演示，我必须回去工作 - 但我会保存最终编辑，以便在完成时使用。

“我见过的大多数代码都采用占位符的值并将其填充到输入本身中，这导致了这个问题”

好吧，这几乎就是占位符文本在幕后所做的事情（尽管它并没有真正更新输入的值）。

一种选择是类似于以下内容：

http://fuelyourcoding.com/scripts/infield/ http://fuelyourcoding.com/scripts/infield/

这里的概念是使用 CSS 移动标签，使其位于字段顶部并且看起来像占位符文本。请注意，标签不一定与占位符文本相同。标签很重要，特别是对于可访问性而言，而占位符文本除了标签之外还可以被视为“帮助文本”。

另一个选项是您一直在做的事情，获取占位符属性的内容并通过 JS 将其移动到输入本身的值中。

您遇到的问题是您在检查虚假占位符文本是否仍然存在之前提交了表单。

为了解决这个问题，您希望将一个事件附加到表单的提交中，在提交表单之前，该事件将首先查看所有输入字段，获取它们的值，将其与其占位符属性进行比较，如果匹配，则设置值为空白。

UPDATE:

要解决您在与占位符文本匹配的用户输入值的注释中提出的问题，您可以执行以下操作：

$('input[placeholder]').each(function(){

 if($(this).val() === $(this).attr('placeholder')){
      // in the odd situation where the field is prepopulated with
      // a value and the value just happens to match the placeholder,
      // then we need to flag it
      $(this).data('skipCompare','true');
  }    

// move the placeholder text into the field for the rest of the blank inputs
   if($(this).val().length===0){
       $(this).val($(this).attr('placeholder'))
   }

// move the placeholder text into the field for the rest of the blank inputs
  if($(this).val().length===0){
      $(this).val() = $(this).attr('placeholder');
  }


  $(this)
     .focus(function(){
           // remove placeholder text on focus
           if($(this).val()==$(this).attr('placeholder')){
               $(this).val('')
           }
     })
     .blur(function(){
         // flag fields that the user edits
         if( $(this).val().length>0 && $(this).val()==$(this).attr('placeholder')){
             $(this).data('skipCompare','true');
         }
         if ( $(this).val().length==0){
             // put the placeholder text back
             $(this).val($(this).attr('placeholder'));
         }
     })


 })

 $('#submitButton').click(function(){
   $('input[placeholder]').each(function(){
     if( !($(this).data('skipCompare')) && $(this).val() == $(this).attr('placeholder')     ){
         $(this).val('');
     };
     alert($(this).val());
   })
})

已经很晚了，我也累了，所以这一切可能是完全错误的。没有给出任何保证。 ;)