为 Internet Explorer 输入占位符

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

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

现在已经有一些占位符模拟脚本了。它们通常的工作方式是将默认文本放入输入字段中，给它一个灰色，然后在集中输入字段后再次移除它。

这种方法的缺点是占位符文本位于输入字段中，因此:

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

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

250041 次浏览
小开
最佳答案

在查看 HTML5跨浏览器填充的“ WebForms: input 占位符”部分时，我看到了 JQuery-html5-占位符。

我在 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>

那里还有其他垫片，但我没有全部看。其中之一，占位符，宣传自己为“无依赖性(所以不需要包含 jQuery，不像大多数占位符填充脚本)”

编辑: 对于那些对“如何”那“什么”更感兴趣的人来说，如何创建一个高级的 HTML5占位符填充将完成创建这样一个 jQuery 插件的过程。

另外，有关 IE10的占位符文本如何在焦点处消失的评论，请参阅 在 IE10中保持占位符的焦点，IE10与 Firefox 和 Chrome 不同。不确定是否有解决这个问题的办法。

小开

我用这种方法找到了一个相当简单的解决方案:

Http://www.hagenburger.net/blog/html5-input-placeholder-fix-with-jquery.html

这是个 jquery 黑客程序，在我的项目中运行得很好

小开

我已经写了一个 jquery 插件来解决这个问题... 它是免费的..。

JQuery 目录:

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

网址: Www.kegles.com.br/jquery-placeholder/

小开
  • 只适用于 IE9 +

下面的解决方案绑定到具有占位符属性的输入文本元素。它仅为 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('');
}
});
});
}
});
小开

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

小开

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

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

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

在尝试了一些建议并发现 IE 中存在的问题之后，下面是一个有效的方法:

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

我喜欢的是——你只需要包含 js 文件，不需要启动它或者其他什么。

小开

我想出了一个简单的占位符 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');
}
});
});
});
小开

Placeholdr 是我编写的一个超轻量级的插入式占位符 jQuery polyfill，缩小了不到1 KB。

我确保这个图书馆能解决你们两个的问题:

  1. Placeholdr 扩展了 JQuery $. fn.val ()函数，以防止由于 Placeholdr 而在输入字段中出现文本时出现意外的返回值。因此，如果坚持使用 jQueryAPI 来访问字段的值，就不需要做任何更改。

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

同样，我使用 Placeholdr 的目标是为占位符问题提供一个简单的插入式解决方案。如果你还有什么想要 Placeholdr 支持的请在 Github 上告诉我。

小开

你可使用:

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

我使用的是 占位符标签。它是基于 这个的，可以演示为 给你。

在 ie7，ie8，ie9工作。

行为模仿当前的 Firefox 和 chrome 行为-“占位符”文本在焦点处仍然可见，只有在输入字段时才会消失。

小开

我创建了自己的 jQuery 插件，因为我对现有的 shims 在焦点上隐藏占位符感到失望，这造成了一个劣质的用户体验，也不符合 Firefox、 Chrome 和 Safari 的处理方式。如果您希望在首次加载页面或弹出窗口时将输入集中在一起，同时在输入文本之前仍然显示占位符，那么这种情况尤其如此。

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

小开

注意: 这篇文章的作者声称它“可以在任何你能想象到的浏览器中工作”，但是根据评论，这对 IE11来说是不正确的，然而对于 和大多数现代浏览器一样，IE11也有本地支持来说是不正确的

Js 是我所见过的最好的占位符填充，它是轻量级的，不依赖于 JQuery，覆盖了其他较老的浏览器(不仅仅是 IE) ，并且有隐藏输入和运行一次占位符的选项。

小开

要插入插件并检查 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>
小开

下面是一个纯 javascript 函数(不需要 jquery) ，它可以为 IE8及以下版本创建占位符，也可以用于密码。它读取 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>

小开

简单如下:

$(function() {
...


var element = $("#selecter")
if(element.val() === element.attr("placeholder"){


element.text("").select().blur();
}


...
});

提交答案