javascript - IE : Placeholder of input field affect the width of select box

Question

<form>
 <input type="text" placeholder="some text">
 <select>
  <option>op1</option>
  <option>op2</option>
  <option>op3</option>
 </select>
</form>

我首先单击选择框。这是工作，选择区域的宽度适合选择控件。但是如果我单击文本字段然后单击选择框，则选择区域看起来更大。如果我删除输入字段的占位符属性，它就可以正常工作。我认为这是 Internet Explorer 占位符的问题。 https://jsfiddle.net/22v1og48/对于这个问题有什么想法吗？如何仍然保留占位符但选择框仍然正常工作？

Answer 1

我能够解决此问题的唯一方法是删除焦点上的占位符并将其重新设置为模糊:

$('#a1')
  .data('placeholder', $('#a1').attr('placeholder'))
  .focus(function() {
    $(this).attr('placeholder', '');
  })
  .blur(function() {
    $(this).attr('placeholder', $(this).data('placeholder'));
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="a1" type="text" placeholder="some text"><select>
    <option>op1</option>
    <option>op2</option>
    <option>op3</option>
  </select>
</form>

Note that in IE the placeholder disappear when you focus, but this is no how it works in other browsers (firefox/chrome), where the placeholder disappear when you start typing. This code will change this behavior, but will make the select keep it's original size.

另请注意，我在示例中使用了 jQuery，但您可以在没有 jQuery 的情况下执行完全相同的操作(只是编写此示例更快，仅此而已)。