我在使用IE 11中遇到了关于占位符的问题，即使兼容性表格中显示IE 11可以显示占位符。我不是指输入框聚焦时的占位符，而是在未聚焦时也没有占位符。
IE版本：11.0.9600
我的占位符上没有应用任何CSS。
在其他浏览器中，占位符是正常显示的。
我尝试使用meta标签进行兼容性设置，但没有改变。
<input id="textinput" name="name" type="text" placeholder="Name" class="form-control input-md" /></input>
大家好，我刚刚发现我的可爱公司安装了IE 11，但是强制使用IE 8视图 - 天哪。
链接中包含完整的代码。
$(function(){$("input, textarea").placeholder()
我刚在另一个Stackoverflow问题中回答了这个问题，但也许我可以在这个问题中帮助人们。
我遇到了同样的问题，并发现是我的CSS框架（Foundation）设置了所有输入的高度为2.4375rem...你需要覆盖它！使用类似于以下内容：
[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea {
height: auto;
}
如果使用JavaScript或正常的用户交互来聚焦于输入框，IE 11将不会显示占位符。
将placeholder-label.js作为外部js添加在下方。
( function( $ ) {
var IE10 = !!(navigator && navigator.userAgent && navigator.userAgent.match('MSIE 10'));
var IE11 = !!(navigator && navigator.userAgent && navigator.userAgent.match(/Trident.*rv\:11\./));
var overridePlaceholder = (IE10 || IE11);
$.fn.placeholder_labels = function(options) {
var that = this;
var defaults = {
blurColor : '#aaaaaa',
focusColor : '#bbbbbb',
labelClass : 'placeholder-label'
}
var settings = $.extend({}, defaults, options);
// test if HTML5 placeholder is supported or we do not want to
// override default placeholder behavior; if so, quit
if ('placeholder' in document.createElement('input') && !overridePlaceholder) {
return this;
}
// Go through each input and/or text area and add a placeholder label
// should be envoked as follows
// $("input[placeholder], textarea[placeholder]").placeholder_labels();
this.each(function(){
var $input = $( this );
var placeholder_text = $input.attr( 'placeholder' );
if (overridePlaceholder) $input.attr('placeholder', '');
var line_height = {};
if( !$input.is('textarea') && $input.css('height') != 'auto') {
line_height = { lineHeight: '23px', whiteSpace: 'nowrap' };
//add line height as below if having alignment
//$input.css('height')
}
// create a label and a span within it
var $label = $( '<label></label>' ).addClass(settings.labelClass);
$label.css("width", "100%");
var $span = $( '<span>' + placeholder_text + '</span>' );
$span.appendTo( $label );
// Copy input styles and apply them to the placeholder
// should get it 95% of the way toward looking right
$span.css($.extend({
position:'absolute',
display: 'inline',
float: 'none',
overflow: 'hidden',
textAlign: 'left',
color: settings.blurColor,
cursor: 'text',
paddingTop: $input.css('padding-top'),
paddingRight: $input.css('padding-right'),
paddingBottom: $input.css('padding-bottom'),
paddingLeft: $input.css('padding-left'),
marginTop: $input.css('margin-top'),
marginRight: $input.css('margin-right'),
marginBottom: $input.css('margin-bottom'),
marginLeft: $input.css('margin-left'),
fontSize: $input.css('font-size'),
fontFamily: $input.css('font-family'),
fontStyle: $input.css('font-style'),
fontWeight: $input.css('font-weight'),
textTransform: $input.css('text-transform'),
backgroundColor: 'transparent',
zIndex: 99
}, line_height));
$('#typefi-btn-clear-filter').insertAfter('#typefi-files-search-input');
// the label surrounds the input
$label.insertBefore( $input ).append( $input );
// try getting the input's size even if it is hidden
var w = $input.width(),
h = $input.height();
// test for the case of the input being hidden
if ( !w || !h ) {
// get dimensions by cloning the input and grabbing height and width
var $clone = $input.clone().appendTo( 'body' ).css({
position : 'absolute',
visibility : 'hidden',
display : 'block'
});
// fetch the correct size (hopefully)
w = $clone.width();
h = $clone.height();
$clone.remove();
}
// if the input is hidden or shown, so should the placeholder be
$input.on('hide', function() {
$span.hide();
});
// when showing, ensure the text is the right size
$input.on('show', function(){
$span.show().css({
width:$input.width()+'px',
height:$input.height()+'px'
});
});
/* If the input is starting out hidden or there is a default value in
* the input already, hide the placeholder
*/
if ( !$input.is(':visible') || $input.val().length ) {
$span.hide();
}
/* Show the placeholder untill a key is pressed in the field
* restore the placeholder if the field is blank.
*/
$input
.on("keydown keyup", function() {
if ( $(this).val() === "" ) {
$span.show();
} else {
$span.hide();
}
})
.focus( function() {
$span
.addClass( "input-selected" )
.css('color', settings.focusColor);
})
.blur( function() {
$span
.removeClass( "input-selected" )
.css('color', settings.blurColor);
});
// If the placeholder is focused, send focus to the input
$span.focus( function() {
$input.focus();
});
// If autofocus, refocus input
if($input.attr("autofocus")){
$input.focus();
}
});
// override jQuery.hide() to trigger the 'hide' event
var hide = $.fn.hide;
$.fn.hide = function() {
this.trigger('hide');
return hide.apply(this, arguments);
};
// override jQuery.show() to trigger the 'show' event
var show = $.fn.show;
$.fn.show = function() {
this.trigger('show');
return show.apply(this, arguments);
};
return that;
};
})( jQuery );
然后在 HTML 中如下链接 js。
<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js\"></script>
<script src="/js/placeholder-label.js"></script>
<script>
$( function() {
$("input[placeholder], textarea[placeholder]").placeholder_labels();
});
</input>。您可能希望通过HTML验证器运行页面以查看是否有其他错误。 - j08691