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

Question

最近我一直在研究jquery/javascript解决方案来模拟placeholder属性,但它们似乎都没有.常见问题是:

• 首先不使用本机浏览器支持
• 表单实际上可以发布占位符文本的值
• 如果值相同,则无法识别占位符文本和用户输入(嘿,我的电子邮件是IS user@example.com !!为什么不提交？嘿我想搜索字符串"搜索"但它不会让我来!)
• 难以设计或区分常规文本和占位符文本
• 突兀的实现(几乎总是.我不想为每个输入添加2个div和一个样式表来执行此操作)
• 只是不起作用.jQuery网站上至少有2个.

我已经玩了一些尝试让它正常工作(从我已经看到的一些代码中获得一些提示),但它仍然需要工作.特别是,表单可以发布占位符的值.欢迎评论和修改jsfiddle.(注意:Demo必须在没有占位符支持的情况下在浏览器中查看)我看到的大多数代码都会将它的值placeholder放入输入本身,导致这个问题,我觉得必须有更好的方法.

有一个很好的清洁解决方案,实际上有效吗？

编辑:我想强调一下:它应该像你在尽可能本地支持它的浏览器中看到的那样,并且尽可能不突兀,正如我当前的代码中所证明的那样,除了包括脚本并使用placeholder正常情况下支持它的浏览器.

更新:@DA目前的解决方案是完美的几个错误修复(见评论),很想看到这个100%汇集在一起​​,并把所有坏的和错误的代码放在网上羞耻.

更新:使用DA代码的几个mod工作,但它仍然不完美,主要是关于动态添加的输入字段和现有submit()绑定.感谢所有的帮助,我现在已经决定它不值得.我知道有些人肯定会使用这个.这是一个很好的技巧,但对我来说,即使是1%的可能性,表单提交做不想做的事情,或者错误地阅读用户输入,也不值得.这个小功能不值得头疼,IE和好友只能处理它,或者如果真的需要它可以根据具体情况实现,就像客户需要它一样.@DA再次感谢,这是我见过的最好的实现.

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

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

这样,您无需在提交或处理可能发生的任何其他问题时执行任何操作.抱歉,还没有演示,我必须重新开始工作 - 但是我会保存最终的编辑内容.

Answer 1

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

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

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

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

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

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

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

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

更新：

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

$('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());
   })
})

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