如何在不占用空间的情况下进行隐藏可见性的文本输入答案

【问题标题】：How to make text input with hidden visibility taking no space如何在不占用空间的情况下进行隐藏可见性的文本输入
【发布时间】：2016-02-01 02:31:54
【问题描述】：

我正在使用具有隐藏可见性的辅助输入来获取主要输入的文本初始宽度。所以辅助输入类似于主输入的标尺。

var ruler = el.cloneNode(true); //"el" is primary input
ruler.style.visibility = "hidden";
ruler.style.width = "0px";
document.body.appendChild(ruler);

display: none 属性不能正常工作。所以现在我问你如何在不可见的情况下添加输入，不占用空间但仍然使用滚动宽度，我希望它向后兼容 IE6，也许你要告诉我的只是使文本输入占用空间的属性，以便将是第二个答案标题。谢谢你帮助我... ??????

【问题讨论】：

您为什么不想使用 Javascript 测量主要输入的长度？您为什么要为此使用第二个输入？
“display: none 无法正常工作”。究竟是什么不起作用？
这些都行吗？ stackoverflow.com/a/15855858/399726
@BenjaminGolder 我正在使用 javascript，但如果我只使用一个，则需要更多时间来处理。
@Oriol 如果我使用了 display: none 属性元素将不会返回 scrollWidth int。

标签： javascript html css

【解决方案1】：

这些属性强制具有隐藏可见性的输入不占用空间。也许这不是完整的列表，但还是更好。

var ruler = el.cloneNode(true);
ruler.style.visibility = "hidden";
ruler.style.width = "0px";
ruler.style.height = "0px";
ruler.style.paddingTop = "0px";
ruler.style.paddingLeft = "0px";
ruler.style.paddingRight = "0px";
ruler.style.paddingBottom = "0px";
ruler.style.outlineWidth = "0px";
ruler.style.borderWidth = "0px";
ruler.style.marginTop = "0px";
ruler.style.marginLeft = "0px";
ruler.style.marginRight = "0px";
ruler.style.marginBottom = "0px";
document.body.appendChild(ruler);

【讨论】：