为Internet Explorerinput占位符

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

可悲的是IE浏览器,包括IE 9不支持它。

那里已经有一些占位符模拟器脚本。 他们通常通过将默认文本放入input字段来工作,给它一个灰色的颜色,并在您关注input字段后立即将其删除。

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

  1. 脚本不能轻易地检查input字段是否为空
  2. 服务器端处理必须检查默认值,以便不将占位符插入到数据库中。

我想有一个解决scheme,占位符文本不在input本身。

17 Solutions collect form web for “为Internet Explorerinput占位符”

在查看HTML5 Cross Browser Polyfills的“Web Forms:input placeholder”部分时,我看到的是jQuery-html5-placeholder 。

我试了一下IE9的演示 ,它看起来像是用一个span来包装你的<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> 

那里还有其他的垫片,但是我没有看到它们。 其中之一, Placeholder.js ,宣传自己是“没有依赖关系(所以不需要包括jQuery,不像大多数占位符polyfill脚本)”。

编辑:对于那些“如何”, 如何创build一个先进的HTML5占位符polyfill ,通过创build一个jQuery插件,这样做的过程感兴趣。

此外,请参阅IE10中的占位符重点,了解如何使用与Firefox和Chrome不同的IE10重点放置占位符文字。 不知道是否有解决这个问题。

使用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字段为空,它也提供占位符文本。

首先设置您的表单,并在input标签中包含您的占位符属性。

 <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 ); 

仅在一个input上使用

 $('#myinput').placeHolder(); // just one 

当浏览器不支持HTML5占位符属性时,我build议您在网站上的所有input字段上实施它:

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

在尝试了一些build议,并在IE浏览器中看到的问题是这样的工作:

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

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

  • 只适用于IE9 +

以下解决scheme使用placeholder属性绑定到input文本元素。 它模拟一个仅用于IE的占位符行为,并在提交时清除input的值字段(如果未更改)。

添加这个脚本和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(''); } }); }); } }); 

我build议你一个简单的function:

 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 :)'); 

我发现了一个相当简单的解决scheme:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

这是一个jQuery的破解,它完美的工作在我的项目上

您可以使用 :

 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); 

这样简单:

 $(function() { ... var element = $("#selecter") if(element.val() === element.attr("placeholder"){ element.text("").select().blur(); } ... }); 

我写了一个jQuery插件来解决这个问题..它是免费的..

JQuery目录:

http://plugins.jquery.com/project/kegles-jquery-placeholder

网站: http://www.kegles.com.br/jquery-placeholder/

我想出了一个简单的占位符JQuery脚本,它允许自定义颜色,并在重点时使用清除input的不同行为。 它取代了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'); } }); }); }); 

Placeholdr是我写的一个超轻量级的embedded式占位符jQuery聚合填充。 它小于1 KB的缩小。

我确信这个库可以解决你的两个问题:

  1. Placeholdr扩展了jQuery $ .fn.val()函数,以防止由于Placeholdr在input字段中出现文本时出现意外的返回值。 所以如果你坚持使用jQuery API来访问你的字段的值,你不需要改变一个东西。

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

再次,我与Placeholdr的目标是为占位符问题提供一个简单的插入式解决scheme。 让我知道在Github上,如果你还有什么其他的东西可以支持Placeholdr的话。

插入插件,并检查ie是完全workingjquery.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 (eg 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> 

这是一个纯粹的JavaScript函数(不需要jquery),它将为IE 8及更低版本创build占位符,它也适用于密码。 它读取HTML5占位符属性,并在表单元素后面创build一个span元素,并使表单元素背景透明:

 /* 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> 

注意:这个polyfill的作者声称它“几乎可以在任何你能想象的浏览器中工作”,但是根据对IE11来说这不是真实的评论, IE11有本地支持,就像大多数现代浏览器

Placeholders.js是我见过的最好的占位符polyfill,是轻量级的,不依赖于JQuery,覆盖了其他老版本的浏览器(不仅仅是IE),还有隐藏input和运行一次占位符的选项。

我使用jquery.placeholderlabels 。 这是基于此 ,可以在这里演示。

在ie7中,ie8,ie9。

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

我感到沮丧之后创build了自己的jQuery插件,现有的垫片会将占位符隐藏在焦点上,这会造成较差的用户体验,并且与Firefox,Chrome和Safari的处理方式不一致。 如果要在第一次加载页面或popup窗口时要使input聚焦,而在input文本之前仍显示占位符,则情况尤其如此。

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

  • Respond.JS不在IE 8中工作
  • 在IE7 / 8中模拟CSS3 border-radius和box-shadow
  • 数据URIscheme和Internet Explorer 9错误
  • Internet Explorer @ font-face失败
  • IE7漂浮正确的问题
  • 使IE来caching资源,但总是重新validation
  • Internet Explorer 8是否支持HTML 5?
  • Internet Explorer 11通过元标记禁用“在兼容性视图中显示Intranet站点”不起作用
  • jQuery - keydown()在div不工作在Firefox
  • 哪个版本的Microsoft Internet Explorer支持WebRTC?
  • 如何解决IE6-IE8中的Web字体加载问题?