占位符 inte.net explorer 11 未显示

Question

I have a problem with placeholders in IE 11 even though it says in compatibility table that IE 11 can show placeholders. I am not talking about focus on input. There are no placeholders also when I am not focused on input box.

IE Version: 11.0.9600

I have no css applied on the placeholders.

In other browsers placeholder is showing.

I tried also compatibility using meta tags, no change.

<input id="textinput" name="name" type="text" placeholder="Name" class="form-control input-md" /></input>

Answer 1

Okay folks, I just discovered that my lovely company has installed IE 11 but with forced IE 8 view - my god.

• Nevertheless, I solved the problem with this jQuery script, now it is working. https://codepen.io/engza/pen/DptoH

whole code in the link

$(function(){$("input, textarea").placeholder()

Answer 2

I just answered this on another Stackoverflow question but maybe I can help people in this question too.

I had the same problem and found out that it was the setting of my CSS framework (Foundation) that put a height of 2.4375rem to all inputs... You need to override that! With something like

[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;
}

Answer 3

如果您使用 JavaScript 或普通用户交互专注于输入，则 IE 11 将不会显示占位符。

Answer 4

add below placeholder-label.js as an external 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 );

Then Link js in HTML as below.

<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();
});