javascript - 添加和删​​除相同的类后，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;。谢谢你。

标签： javascriptgoogle-chromeblink

Answer 1

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

然而，这可能是一个极端情况——hidden规则相当奇怪。如果你更换

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

和

.hidden {
  display: none;
}

Chrome 恢复正常运行。

---

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

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

如果父节点显示为块元素，这只会挽救 Chrome 的行为 - 尝试将其包装input在标签中而不将其显示规则更改为“块”只会导致当类的类span重新出现多行输入元素时元素被移除。hiddenspan

如果现有div容器没有其他子元素，则只需将其更改为绝对元素即可。

尝试这个的想法来自于 CSS 在应用于绝对块时如何失败，但如果应用于position: static同一个绝对块内的静态块 ( ) 则可以工作。