Internet Explorer的输入占位符


175

HTML5 placeholderinput元素上引入了属性,该属性允许显示灰色的默认文本。

遗憾的是,包括IE 9在内的Internet Explorer不支持它。

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

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

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

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

Answers:


151

在查看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,将自己宣传为“无依赖项(因此,与大多数占位符polyfill脚本不同,无需包含jQuery)”。

编辑:对于那些对“如何”,“什么”更感兴趣的人,如何创建高级HTML5占位符polyfill,该过程逐步完成了创建jQuery插件的过程。

另外,请参见在IE10中将占位符放在焦点上,以获取有关占位符文本在IE10上如何消失在焦点上的注释,这与Firefox和Chrome不同。不知道是否有解决此问题的方法。


2
在IE7,IE8和IE9中对我来说工作得很好。
Mark Rummel 2012年

2
该插件已不再维护,并且存在许多已知问题。
伊恩·邓恩

13
下注?答案包含指向其他垫片的链接。更新为包括非jQuery版本。
凯文·哈坎森

插件的github页面不再存在。这是另一个

1
不太大的风扇会导致输入被修改,我建议您在下面查看尼克的回答。它使用透明的覆盖而不是修改输入的值
Nathan Tregillus

38

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


3
通过jQuery-html5-placeholder对此+1。这样看起来好多了,并且可以处理一些其他案例遗漏的边缘案例(例如隐藏字段)
andygeers 2012年

2
不得不说这次StackOverflow提供了一个错误的建议。当您单击IE时,jQuery Placeholder不会清除输入。
firedev

12

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

您能否为上述内容创建小提琴/演示,也将对我和以后的观众有所帮助。
user2086641 2013年

它是否支持密码字段。
user2681579

6

在尝试了一些建议并看到IE中的问题后,下面的方法可以工作:

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

我喜欢的东西-您只包括js文件。无需启动它或任何东西。


使用此占位符后可以正常工作,但是,如果它们在表单中有任何错误,则在显示表单错误时,占位符文本与输入字段不一致,我尝试解决但无法解决。您能指导我如何解决。
user2681579

我真的比价值修改版本更喜欢这一版本。我希望占位符的html5版本也能以这种方式工作!(即离开占位符直到输入一些文本,而不是失去焦点的值)
Nathan Tregillus

4
  • 仅适用于IE9 +

以下解决方案使用placeholder属性绑定到输入文本元素。它仅针对IE仿真占位符行为,并在提交时清除输入值字段(如果未更改)。

添加此脚本,IE似乎支持HTML5占位符。

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});

1
许多用户仍然使用IE8,有些甚至使用IE7。因此,如果它不支持它们
就不会这样做

4

我建议你一个简单的功能:

function bindInOut(element,value)
{
    element.focus(function()
    {
        if(element.val() == value) element.val('');         
    }).
    blur(function()
    {
        if(element.val() == '') element.val(value);
    });

    element.blur();
}

并以这种方式使用它:

bindInOut($('#input'),'Here your value :)');


2

您可以使用 :

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);



1

我想出了一个简单的占位符JQuery脚本,该脚本允许自定义颜色,并在聚焦时使用另一种清除输入的行为。它取代了Firefox和Chrome中的默认占位符,并增加了对IE8的支持。

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});

完美的洗净液,但有一个错误(this).attr('tooltip',$(this).attr('placeholder')); //将这行更改为$(this).attr('tooltip',$(this).attr('placeholder')); // buffer
angel.bonev

0

占位符是我编写的超轻量级嵌入式占位符jQuery polyfill。小于1 KB。

我确保该库可以解决您的两个问题:

  1. Placeholdr扩展了jQuery $ .fn.val()函数,以防止由于Placeholdr而导致输入字段中出现文本时出现意外的返回值。因此,如果您坚持使用jQuery API访问字段的值,则无需进行任何更改。

  2. 占位符侦听表单提交,并从字段中删除占位符文本,以便服务器仅看到一个空值。

同样,我使用Placeholderr的目标是为占位符问题提供简单的嵌入式解决方案。在Github上让我知道是否还有其他对Placeholderr支持感兴趣的东西。


0

插入插件并检查IE是否完美工作jquery.placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>

0

这是一个纯JavaScript函数(无需jquery),它将为IE 8及以下版本创建占位符,并且也适用于密码。它读取HTML5占位符属性,并在form元素后面创建一个span元素,并使form元素背景透明:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))
<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>


0

注意:该polyfill的作者声称它“几乎可以在您能想象的任何浏览器中工作”,但根据注释,这对IE11并不正确,但是IE11像大多数现代浏览器一样具有本机支持。

Placeholders.js是我见过的最好的占位符polyfill,它轻巧,不依赖JQuery,涵盖其他较旧的浏览器(不仅限于IE),并且具有输入时隐藏和一次运行占位符的选项。


1
@Niclas IE9及更高版本具有对占位符的本地支持。
Hexodus

我已在此答案中添加了注释,并带有指向占位符caniuse的链接。
戴夫·埃弗里特

-1

我使用jquery.placeholderlabels。它基于,可以在此处进行演示。

在ie7,ie8,ie9中工作。

行为模仿当前的Firefox和chrome行为-“占位符”文本在焦点上保持可见,仅在字段中键入内容后才会消失。


-1

我对现有的填充物将占位符隐藏在焦点上感到沮丧之后,创建了自己的jQuery插件,这造成了较差的用户体验,并且与Firefox,Chrome和Safari的处理方式也不匹配。如果您希望在页面或弹出窗口首次加载时使输入聚焦,同时仍显示占位符直到输入文本,则尤其如此。

https://github.com/nspady/jquery-placeholder-labels/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.