输入Internet Explorer的占位符

Question

HTML5 placeholder在input元素上引入了属性,允许显示灰色的默认文本.

可悲的是,包括IE 9在内的Internet Explorer不支持它.

那里已经有一些占位符模拟器脚本了.它们通常通过将默认文本放入输入字段,将其设置为灰色并在您聚焦输入字段后再次将其删除来工作.

这种方法的缺点是占位符文本在输入字段中.从而:

1. 脚本无法轻松检查输入字段是否为空
2. 服务器端处理必须检查默认值,以便不将占位符插入数据库.

我想有一个解决方案,其中占位符文本不在输入本身.

Answer 1

在查看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不同.不确定是否有解决此问题的方法.

Answer 2

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

Answer 3

使用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();
      });
  });
} 

Answer 4

在尝试了一些建议并在IE中查看问题后,这是有效的:

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

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