我有一个小问题， placeholder在IE 8-9不支持输入框属性。
是什么力量让我的项目（ASP网）这种支持的最佳方式。 我使用jQuery。 需要我使用一些其他外部工具呢？
是http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html好的解决办法？
Answer 1:
您可以使用此jQuery插件： https://github.com/mathiasbynens/jquery-placeholder
但您的链接似乎也是一个不错的解决方案。
Answer 2:
您可以使用这些polyfills中的任何一个：
- https://github.com/jamesallardice/Placeholders.js （不支持密码字段）
- https://github.com/chemerisuk/better-placeholder-polyfill
这些脚本将添加支持的placeholder在不支持它的浏览器属性，它们不需要jQuery的！
Answer 3:
在$ .Browser.msie是不是最新的JQuery了...你必须使用$。支持
如下图所示：
<script>
(function ($) {
$.support.placeholder = ('placeholder' in document.createElement('input'));
})(jQuery);
//fix for IE7 and IE8
$(function () {
if (!$.support.placeholder) {
$("[placeholder]").focus(function () {
if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
}).blur(function () {
if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function () {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
});
});
}
});
</script>
Answer 4:
如果你使用jQuery的你可以这样做。 从本网站占位符与jQuery
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
这些是备用链路
- 占位符jQuery库
- HTML5 polyfills -去占位符节
Answer 5:
我有几个插件我试过的兼容性问题，这在我看来是支持文字输入占位符的最简单的方法：
function placeholders(){
//On Focus
$(":text").focus(function(){
//Check to see if the user has modified the input, if not then remove the placeholder text
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
}
});
//On Blur
$(":text").blur(function(){
//Check to see if the use has modified the input, if not then populate the placeholder back into the input
if( $(this).val() == ""){
$(this).val($(this).attr("placeholder"));
}
});
}
Answer 6:
$(function(){
if($.browser.msie && $.browser.version <= 9){
$("[placeholder]").focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
}).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
})
});
}
});
试试这个
Answer 7:
我用thisone，它的唯一的JavaScript。
我只是有一个输入元件用一个值，并且当用户点击输入元件上，它它改变到输入元件没有值。
您可以轻松更改使用CSS文本的颜色。 占位符的颜色是在ID #IEinput的颜色，你键入的文本将是颜色的ID #email的颜色。 不要使用getElementsByClassName方法，因为不支持的占位符IE的版本，不支持getElementsByClassName方法要么！
您可以通过设置原始密码输入的文本类型中输入的密码使用的占位符。
叮叮： http://tinker.io/4f7c5/1 -的jsfiddle服务器关闭！
*对不起，我的英语不好
JAVASCRIPT
function removeValue() {
document.getElementById('mailcontainer')
.innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
document.getElementById('email').focus(); }
HTML
<span id="mailcontainer">
<input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>
Answer 8:
对于其他人来说这里登陆。 这是对我工作：
//jquery polyfill for showing place holders in IE9
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
就在你的script.js文件中添加这一点。 礼貌http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Answer 9:
由于大多数解决方案使用jQuery的或不属于本满意，因为我希望它是我写的一个片段为自己的mootools的。
function fix_placeholder(container){
if(container == null) container = document.body;
if(!('placeholder' in document.createElement('input'))){
var inputs = container.getElements('input');
Array.each(inputs, function(input){
var type = input.get('type');
if(type == 'text' || type == 'password'){
var placeholder = input.get('placeholder');
input.set('value', placeholder);
input.addClass('__placeholder');
if(!input.hasEvent('focus', placeholder_focus)){
input.addEvent('focus', placeholder_focus);
}
if(!input.hasEvent('blur', placeholder_blur)){
input.addEvent('blur', placeholder_blur);
}
}
});
}
}
function placeholder_focus(){
var input = $(this);
if(input.get('class').contains('__placeholder') || input.get('value') == ''){
input.removeClass('__placeholder');
input.set('value', '');
}
}
function placeholder_blur(){
var input = $(this);
if(input.get('value') == ''){
input.addClass('__placeholder');
input.set('value', input.get('placeholder'));
}
}
我承认，它看起来比其他人更多一点，但它工作正常。 __placeholder是CCS级，使占位符文本花哨的颜色。
我用fix_placeholder在window.addEvent（“domready事件”，和... ...一样弹出窗口任何additinally添加代码。
希望你喜欢。
亲切的问候。
Answer 10:
我用这个链接的代码http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html
但在浏览器检测我用：
if (navigator.userAgent.indexOf('MSIE') > -1) {
//Your placeholder support code here...
}
Answer 11:
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />
Answer 12:
添加下面的代码，它会做。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
<script type="text/javascript">
// Mock client code for testing purpose
$(function(){
// Client should be able to add another change event to the textfield
$("input[name='input1']").blur(function(){ alert("Custom event triggered."); });
// Client should be able to set the field's styles, without affecting place holder
$("textarea[name='input4']").css("color", "red");
// Initialize placeholder
$.Placeholder.init();
// or try initialize with parameter
//$.Placeholder.init({ color : 'rgb(255, 255, 0)' });
// call this before form submit if you are submitting by JS
//$.Placeholder.cleanBeforeSubmit();
});
</script>
从下载完整的代码和演示https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip
Answer 13:
这里是会为IE 8和下面创建一个占位符javascript函数和它的作品的密码，以及：
/* 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> Answer 14:
<script>
if ($.browser.msie) {
$('input[placeholder]').each(function() {
var input = $(this);
$(input).val(input.attr('placeholder'));
$(input).focus(function() {
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
$(input).blur(function() {
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
});
});
}
;
</script>
文章来源: How to support placeholder attribute in IE8 and 9
