为Internet Explorerinput占位符
HTML5在input元素上引入了placeholder属性，允许显示灰色的默认文本。
可悲的是IE浏览器，包括IE 9不支持它。
那里已经有一些占位符模拟器脚本。 他们通常通过将默认文本放入input字段来工作，给它一个灰色的颜色，并在您关注input字段后立即将其删除。
这种方法的缺点是占位符文本在input字段中。 从而：
- 脚本不能轻易地检查input字段是否为空
- 服务器端处理必须检查默认值，以便不将占位符插入到数据库中。
我想有一个解决scheme，占位符文本不在input本身。
在查看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重点放置占位符文字。 不知道是否有解决这个问题。
在我的经验中最好的是https://github.com/mathiasbynens/jquery-placeholder （由html5please.com推荐）。 http://afarkas.github.com/webshim/demos/index.html在其更广泛的polyfills库中也有很好的解决scheme。;
使用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脚本，它允许自定义颜色，并在重点时使用清除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的缩小。
我确信这个库可以解决你的两个问题：
-
Placeholdr扩展了jQuery $ .fn.val（）函数，以防止由于Placeholdr在input字段中出现文本时出现意外的返回值。 所以如果你坚持使用jQuery API来访问你的字段的值，你不需要改变一个东西。
-
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文本之前仍显示占位符，则情况尤其如此。
