IE：输入字段的占位符影响选择框的宽度

Posted 2023-03-05

【中文标题】IE：输入字段的占位符影响选择框的宽度

【英文标题】：IE: Placeholder of input field affect the width of select box

【发布时间】：2017-04-18 00:50:56

【问题描述】：

<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/ 对这个问题有什么想法吗？如何仍然保留占位符但选择框仍然正常工作？

【问题讨论】：

爱微软！ :(

【参考方案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>

请注意，在 IE 中，placeholder 在您集中注意力时会消失，但在其他浏览器（firefox/chrome）中却不是这样，当您开始输入时占位符会消失。此代码将更改此行为，但会使 select 保持其原始大小。

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