Chrome在添加和删除完全相同的类后将输入字段转换为多行

Question

所以我遇到了一个让我感到困惑的小问题。首先代码：

HTML：

<div>
  <input id="input" type="text" value="Some long long long text that doesn't fit into the input text field">
</div>

<button type="button" onclick="show(false)">
  hide
</button>

<button type="button" onclick="show(true)">
  show
</button>

CSS：

input {
  width: 100px;
  height: 30px;
}
.hidden {
  visibility: hidden;
  position: absolute
}

JS：

var show = b => {
  var input = document.getElementById('input');
  input.classList[b ? 'remove' : 'add']('hidden');
}

我在网页上有一个input type="text"。一旦向其祖先div添加“隐藏/偏移”类，然后删除相同的类，input就会将其内容更改为多行（以防太长而无法在字段中显示）。小提琴很好地说明了我的意思：

https://jsfiddle.net/yq9x01r8/1/

在Chrome中运行。单击隐藏按钮，然后单击显示按钮。

.hidden类在此示例中直接添加到input。在我的页面中，它被添加到了其中一个父对象中，但是它会产生相同的残缺字段（但是，我无法完全那样复制它，太多的东西和嵌套正在进行中。）

请问为什么有任何理由要这样做？这是眨眼的错误吗？有没有CSS可以防止这种情况？请注意，如果可能的话，我不希望使用white-space: nowrap;。谢谢。

Answer 1

[Chrome似乎没有遵循标准规则-不在高度规则中添加!important，添加overflow: hidden;规则或使#input的选择器更加具体，都不会阻止输入框变为多行。

但是可能是一个极端情况-hidden规则很奇怪。如果您替换

.hidden {
  visibility: hidden;
  position: absolute;
}

with

.hidden {
  display: none;
}

Chrome恢复了预期的功能。

---

关于注释信息，隐藏并显示输入而不更改其CSS的另一种方法是隐藏并显示其父元素：

var show = b => {
  var input = document.getElementById('input');
  input.parentNode.classList[b ? 'remove' : 'add']('hidden');

[如果父节点显示为阻止元素，这只会挽救Chrome的行为-尝试将input包装在span标签中，而未将其显示规则更改为“阻止”，只会导致多删除hidden元素的span类时的行输入元素。

如果现有的div容器没有其他子元素，可能需要将其更改为绝对元素。

尝试此操作的想法来自CSS应用于绝对块时如何失败，但是如果应用于同一绝对块内的静态块（display: static），则可以工作。