在本机不支持它的浏览器中模拟“占位符”属性的最准确方法是什么？
最近我一直在研究jquery / javascript解决方案来模仿placeholder属性，但是它们似乎都没有。 常见问题是：
- 首先不使用本机浏览器支持
- 表单实际上可以发布占位符文本的值
- 如果值相同，则无法识别占位符文本和用户输入（嘿，我的电子邮件是IS user@example.com !!为什么不提交？嘿我想搜索字符串“搜索”但它不会让我来！）
- 难以设计或区分常规文本和占位符文本
- 突兀的实现 （几乎总是。我不想为每个输入添加2个div和一个样式表来执行此操作）
- 只是不起作用。 jQuery网站上至少有2个。
我已经玩了一些试图让它正常工作（从我已经看到的一些代码中获得一些提示），但它仍然需要工作。 特别是，表单可以发布占位符的值。 欢迎评论和修改jsfiddle 。 （注意：Demo必须在没有占位符支持的情况下在浏览器中查看）我看到的大多数代码都占用了placeholder的值，并将其填充到输入本身，这导致了这个问题，我觉得必须有更好的方法。
有一个很好的清洁解决方案， 实际上有效吗？
编辑：我想强调一下：它应该像你在尽可能本地支持它的浏览器中看到的那样，并且尽可能不突兀，正如我当前的代码中所certificate的那样，除了包括脚本和正常情况下使用placeholder的浏览器支持它。
更新：@DA目前的解决方案是完美的一些错误修复（见评论），很想看到这个100％汇集在一起，并把所有坏的和错误的代码放在网上羞耻。
更新：使用DA代码的几个mod工作，但它仍然不完美，主要是关于动态添加的输入字段和现有的submit()绑定。 感谢所有的帮助，我现在已经决定它不值得。 我知道有些人肯定会使用这个。 这是一个很好的技巧，但对我来说，即使表单提交做出不打算做的事情，或者错误地阅读用户输入，也不值得1％的可能性。 这个次要function不值得头疼，IE和好友只能处理它，或者如果真的需要它可以根据具体情况实现，就像客户要求它一样。 @DA再次感谢，这是我见过的最好的实现。
结论：我认为克服所有这些问题的唯一方法是这样的：
- 将占位符值复制到新的块级元素
- 将新元素添加到输入中
- 计算输入的高度边框和填充，并在其上移动新元素尽可能接近文本将发生的位置
- 使用标准模糊/更改/焦点事件可在输入具有值或聚焦时隐藏元素
这样，您无需在提交或处理可能发生的任何其他问题时执行任何操作。 对不起没有演示，我必须重新开始工作 – 但是我会保存一个最终的编辑，当它汇集在一起。
“我见过的大多数代码都占用了占位符的值，并将其填充到输入本身，导致了这个问题”
嗯，这几乎就是占位符文本在幕后所做的事情（虽然它不是字面上更新输入的值）。
一种选择是类似于此：
http://fuelyourcoding.com/scripts/infield/
这个概念是你使用CSS移动LABEL，使其位于字段顶部，看起来像占位符文本。 请注意，LABEL不一定与占位符文本相同。 LABEL非常重要，特别是对于可访问性而言，除了标签之外，占位符文本可以更多地被视为“帮助文本”。
另一个选项是你一直在做的，获取占位符属性的内容，并通过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()); }) })
已经很晚了，我累了所以这可能是完全错误的。 没有保证。 ;）
我刚才写的jquery插件：
(function(){ $.fn.inactiveText = function(inactiveClass, defaultValue){ var a, b; this .data ('defaultValue', defaultValue) .addClass('inactive') .focus(a=function(){ var $this = $(this); if($this.hasClass(inactiveClass)){ (valFn.apply($this) == defaultValue) && $this.val(''); (valFn.apply($this) != defaultValue) && $this.removeClass(inactiveClass); } // $this.hasClass(inactiveClass) && $this.valueIs(defaultValue).val('').end().valueIsNot(defaultValue).removeClass(inactiveClass); }) .blur(b=function(){ var $this = $(this); this.value || $this.addClass(inactiveClass).val(defaultValue); }); this.each(a); this.each(b); this.setDefaultValue = function(d){ this.each(a); defaultValue = d; this.each(b); }; return this; }; var valFn = $.fn.val; $.fn.val = function(v){ if(typeof(v) == 'undefined'){ var val = valFn.apply(this, arguments); return val == this.data('defaultValue') ? '' : val; } return valFn.apply(this, arguments); }; })();
为非活动样式定义一个css类（例如灰色文本），你很高兴。
更新小提琴： http ： //jsfiddle.net/cwolves/At8cu/1/
假设定义了jQuery。
$(document).ready(function() { // Use native functionality if possible if (document.createElement('input').placeholder !== undefined) return; // Fallback code $('form').each(function(i, form) { var submitted = false; $(form).find('input[placeholder]').each(function(j, input) { addPlaceholder.call(input); $(input) .focus(removePlaceholder) .blur(addPlaceholder) ; }); $(form).submit(function() { submitted = true; $(this).find('input[placeholder]').each(function(j, input) { removePlaceholder.call(input); }); }); function addPlaceholder() { if (!submitted && '' === $(this).val()) { $(this).val($(this).attr('placeholder')).addClass('placeholder'); } } function removePlaceholder() { if ( $(this).hasClass('placeholder') && $(this).attr('placeholder') === $(this).val() ) { $(this).val('').removeClass('placeholder'); } } }); });
使用CSS设置占位符的样式，使其在所有浏览器中看起来都一样：
:-moz-placeholder { color: #bbb; opacity: 1; } ::-moz-placeholder { color: #bbb; opacity: 1; } :-ms-input-placeholder { color: #bbb; } ::-webkit-input-placeholder { color: #bbb; } .placeholder { color: #bbb; }
试过这些链接？
HTML5表单占位符后退
jQuery占位符文本
所有浏览器中的占位符属性支持