Javascript Internet Explorer 的输入占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5522164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input placeholders for Internet Explorer
提问by NikiC
HTML5 introduced the placeholderattribute on inputelements, which allows to display a greyed-out default text.
HTML5placeholder在input元素上引入了属性，它允许显示灰色的默认文本。
Sadly the Internet Explorer, including IE 9 does not support it.
遗憾的是，包括 IE 9 在内的 Internet Explorer 不支持它。
There already are some placeholder simulator scripts out there. They typically work by putting the default-text into the input field, give it a grey color and remove it again as soon as you focus the input field.
已经有一些占位符模拟器脚本了。它们通常通过将默认文本放入输入字段来工作，将其设置为灰色，并在您聚焦输入字段后立即将其删除。
The drawback of this approach is that the placeholder text is in the input field. Thus:
这种方法的缺点是占位符文本位于输入字段中。因此：
- scripts can't easily check whether an input field is empty
- server side processing must check against the default value, in order to not insert the placeholder into the database.
- 脚本无法轻松检查输入字段是否为空
- 服务器端处理必须检查默认值，以便不将占位符插入到数据库中。
I would like to have a solution, where the placeholder text isn't in the input itself.
我想要一个解决方案，其中占位符文本不在输入本身中。
采纳答案by Kevin Hakanson
In looking at the "Web Forms : input placeholder" section of HTML5 Cross Browser Polyfills, one I saw was jQuery-html5-placeholder.
在查看HTML5 Cross Browser Polyfills的“Web 表单：输入占位符”部分时，我看到的是jQuery-html5-placeholder。
I tried the demoout with IE9, and it looks like it wraps your <input>with a span and overlays a label with the placeholder text.
我用 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>
There are also other shims there, but I didn't look at them all. One of them, Placeholders.js, advertises itself as "No dependencies (so no need to include jQuery, unlike most placeholder polyfill scripts)."
那里还有其他垫片，但我没有全部看。其中之一，Placeholders.js，将自己宣传为“没有依赖项（因此不需要包含 jQuery，不像大多数占位符 polyfill 脚本）。”
Edit:For those more interested in "how" that "what", How to create an advanced HTML5 placeholder polyfillwhich walks through the process of creating a jQuery plugin that does this.
编辑：对于那些对“如何”和“什么”更感兴趣的人，如何创建一个高级 HTML5 占位符 polyfill，其中介绍了创建执行此操作的 jQuery 插件的过程。
Also, see keep placeholder on focus in IE10for comments on how placeholder text disappears on focus with IE10, which differs from Firefox and Chrome. Not sure if there is a solution for this problem.
此外，请参阅在 IE10 中保持占位符的焦点，以获取有关占位符文本如何在 IE10中消失的评论，这与 Firefox 和 Chrome 不同。不确定是否有解决此问题的方法。
回答by user161642
Best one in my experience is https://github.com/mathiasbynens/jquery-placeholder(recommended by html5please.com). http://afarkas.github.com/webshim/demos/index.htmlalso has a good solution among its much more extensive library of polyfills.
我的经验中最好的一个是https://github.com/mathiasbynens/jquery-placeholder（由html5please.com推荐）。http://afarkas.github.com/webshim/demos/index.html在其更广泛的 polyfills 库中也有一个很好的解决方案。
回答by Jonathan Tonge
With a jQuery implementation you can EASILY remove the default values when it is time to submit. Below is an example:
使用 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
});
I know that you are looking for an overlay, but you might prefer the ease of this route (now knowing what I wrote above). If so, then I wrote this for my own projects and it works really nice (requires jQuery) and takes just a couple minutes to implement for your entire site. It offers grey text at first, light grey when in focus, and black when typing. It also offers the placeholder text whenever the input field is empty.
我知道您正在寻找叠加层，但您可能更喜欢这条路线的简便性（现在知道我上面写的内容了）。如果是这样，那么我为我自己的项目编写了这个，它工作得非常好（需要 jQuery）并且只需几分钟即可为您的整个站点实现。它首先提供灰色文本，对焦时提供浅灰色，打字时提供黑色。每当输入字段为空时，它还提供占位符文本。
First set up your form and include your placeholder attributes on the input tags.
首先设置您的表单并在输入标签上包含您的占位符属性。
<input placeholder="enter your email here">
Just copy this code and save it as placeholder.js.
只需复制此代码并将其保存为 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 );
To use on just one input
仅在一个输入上使用
$('#myinput').placeHolder(); // just one
This is how I recommend you implement it on all input fields on your site when the browser does not support HTML5 placeholder attributes:
当浏览器不支持 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();
});
});
}
回答by firedev
After trying some suggestions and seeing issues in IE here is the one that works:
在尝试了一些建议并在 IE 中看到问题之后，这里是一个有效的方法：
https://github.com/parndt/jquery-html5-placeholder-shim/
https://github.com/parndt/jquery-html5-placeholder-shim/
What I have liked - you just include the js file. No need to initiate it or anything.
我喜欢什么 - 你只需要包含 js 文件。无需启动它或任何东西。
回答by Alpha
I suggest you a simple function :
我建议你一个简单的功能：
function bindInOut(element,value)
{
element.focus(function()
{
if(element.val() == value) element.val('');
}).
blur(function()
{
if(element.val() == '') element.val(value);
});
element.blur();
}
And to use it, call it in this way :
要使用它，请以这种方式调用它：
bindInOut($('#input'),'Here your value :)');
回答by Alex
- Works only for IE9+
- 仅适用于 IE9+
The following solution binds to input text elements with the placeholder attribute. It emulates a placeholder behaviour just for IE and clears the input's value field on submit if it is not changed.
以下解决方案绑定到具有 placeholder 属性的输入文本元素。它模拟仅适用于 IE 的占位符行为，如果未更改，则在提交时清除输入的值字段。
Add this script and IE would seem to support HTML5 placeholders.
添加此脚本，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('');
}
});
});
}
});
回答by Yitzchok Glancz
Simple like this:
简单像这样：
$(function() {
...
var element = $("#selecter")
if(element.val() === element.attr("placeholder"){
element.text("").select().blur();
}
...
});
回答by Roy M J
You can use :
您可以使用 ：
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);
回答by bluantinoo
I found a quite simple solution using this method:
我使用这种方法找到了一个非常简单的解决方案：
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
it's a jquery hack, and it worked perfectly on my projects
这是一个 jquery hack，它在我的项目中完美运行
回答by Nataniel Kegles
I have written a jquery plugin to solve this problem.. it's free..
我写了一个jquery插件来解决这个问题..它是免费的..
JQuery Directory:
jQuery 目录：
http://plugins.jquery.com/project/kegles-jquery-placeholder
http://plugins.jquery.com/project/kegles-jquery-placeholder
