模拟“占位符"的最准确方法是什么?属性在本机不支持它的浏览器中? [英] What is the most accurate way to emulate the "placeholder" attribute in browsers that don't support it natively?

问题描述

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

Recently I have been looking at jquery/javascript solutions to emulating the placeholder attribute, but none of them seem to have it right. Common issues are:

• 首先不使用原生浏览器支持
• 表单实际上可能会发布占位符文本的值
• 如果值相同，则无法在占位符文本和用户输入之间进行识别(嘿，我的电子邮件是 [e-mail]！为什么不提交?嘿，我想搜索字符串搜索但它不会让我！)
• 难以设置样式或区分常规文本和占位符文本
• 突兀的实现(几乎总是如此.我不想为每个输入添加 2 个 div 和一个样式表来执行此操作)
• 就是不行.jQuery 网站上至少有 2 个.

• Native browser support is not used first
• The form may actually post the value of the placeholder text
• Inability to recognize between placeholder text and user input if the values are identical (Hey, my email IS [e-mail]!! Why won't it submit? Hey I wanted to search for the string "Search" but it won't let me!)
• Difficult to style or distinguish between regular text and placeholder text
• Obtrusive implementation (almost always. I don't want to add 2 divs per input and a stylesheet to do this)
• Just doesn't work. At least 2 of those on the jQuery website.

我尝试了一些尝试使其正常工作(从我已经看到的一些代码中获取一些提示)，但它仍然需要工作.特别是，表单可以发布占位符的值.欢迎对 jsfiddle 进行评论和修改.(注意:演示必须在没有占位符支持的浏览器中查看) 我见过的大多数代码都采用 placeholder 的值并将其填充到输入本身中，从而导致这个问题，我觉得一定有更好的办法.

I have played around a bit trying to get this to work properly (taking a few hints from some of the code I have seen already), but it still needs work. Particularly, the form may post the value of the placeholder. Comments and mods to the jsfiddle are welcome. (Note: Demo must be viewed in a browser without placeholder support) Most code I've seen takes the value of the placeholder and stuffs it into the input itself which leads to this problem, I feel like there must be a better way.

有没有实际有效的干净整洁的解决方案?

Is there a nice clean solution that actually works?

我想强调这一点:它应该表现得像你在浏览器中看到的那样，尽可能多地原生支持它，并且尽可能不突兀，正如我目前所展示的代码，除了包含脚本和使用 placeholder 之外不需要任何其他东西，就像您通常对支持它的浏览器一样.

I want to stress this: it should behave the way you see it in browsers that natively support it as much as possible, and be as unobtrusive as possible, as demonstrated in my current code, which does not require anything other than including the script and using the placeholder as you normally would for browsers that support it.

更新:@DA 的当前解决方案是一些远离完美的错误修复(请参阅评论)，很想看到这 100% 结合在一起并将所有不好的 &网络上的错误代码令人羞耻.

UPDATE: @DA's current solution is a couple of bug fixes away from perfect (see comments), would love to see this come together 100% and put all the bad & buggy code on the net to shame.

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

UPDATE: Got this working with a couple mods to DA's code but it's still not perfect, mostly in regards to dynamically added input fields and existing submit() bindings. Thanks for all the help, I've decided for now that it's not worth it. I know a few people that will definitely use this though. It's a nice trick to have, but to me not worth even a 1% possibility of a form submit doing something its not intended to, or reading user input incorrectly. This minor feature is just not worth the headache, IE and pals can just deal with it, or it can be implemented on a case-by-case basis if it's really needed, like if the client demands it. @DA thanks again, this is the best implementation I've seen.

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

CONCLUSION: I think the only way to overcome all these issues is something like this:

• 将占位符值复制到新的块级元素
• 将新元素添加到输入中
• 计算输入的高度边框和内边距，然后将新元素移动到尽可能靠近文本出现位置的位置
• 当输入有值或被聚焦时，使用标准的模糊/变化/焦点事件隐藏元素

这样您就无需在提交时执行任何操作或处理可能发生的任何其他问题.抱歉，还没有演示，我得回去工作了 - 但我会保存最后的编辑以备不时之需.

This way you don't have to do anything on submit or deal with any of the other issues that can occur. Sorry no demo yet, I've got to get back to work - but I'll save a final edit for when this comes together.

推荐答案

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

"Most code I've seen takes the value of the placeholder and stuffs it into the input itself which leads to this problem"

嗯，这几乎就是占位符文本在幕后所做的事情(尽管它并不是真正更新输入的值).

Well, that's pretty much what the placeholder text does behind the scenes (albeit, it's not literally updating the value of the input).

一种选择是类似于此:

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

这里的概念是使用 CSS 移动标签，使其位于字段顶部，看起来像占位符文本.请注意，LABEL 不一定与占位符文本相同.LABEL 很重要，尤其是对于可访问性而言，而占位符文本可以更多地被视为除标签之外的帮助文本".

The concept there is you move the LABEL with CSS so that's on top of the field and looks like placeholder text. Note that a LABEL isn't necessarily the same as placeholder text. A LABEL is important to have, especially for accessibility, while placeholder text can be thought more as 'help text' in addition to the label.

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

The other option is what you've been doing, take the content of the placeholder attribute and move it into the value of the input itself via JS.

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

Where you're getting hung up is you are submitting the form before checking to see if the fake placeholder text is still there.

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

To get around that, you want to attach an event to the submission of the form that, before submitting the form, will first look at all the input fields, grab their values, compare it to their placeholder attributes, and if it matches, set the value to blank.

更新:

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

To address the issue you brought up in a comment of the user-inputted value matching the placeholder text, you could do something like this:

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

很晚了，我很累，所以这一切可能是完全错误的.不提供任何保证.;)

It's late and I'm tired so all that might be completely wrong. No warranties given. ;)

这篇关于模拟“占位符"的最准确方法是什么?属性在本机不支持它的浏览器中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！