Question

在我正在研究的这个项目中，他们创建了看起来像包含数据的文本框的div。然后，当您单击div时，它们将更改为读写文本框。发生这种情况时，文本框比原始div大小（宽度）略大。

除了将div更改为R / O文本框然后将它们翻转到R / W文本框之外，还有一种方法可以获取原始div的宽度并将其传递给新显示的文本框的大小。

基本上，文本框最初是隐藏的（每个屏幕隐藏一个文本框）。当用户单击div时，隐藏的文本框将显示并移动到div所在的位置（在顶部）。当文本框文本值更改并移开焦点时，div的innerHTML会更改，然后文本框会在屏幕上向下移动。

我需要做的是div的原始大小可以是一个小文本框或一个长文本框。当onclick发生时，我需要文本框宽度与原始div大小完全相同。

清楚如泥吧？

感谢任何帮助。

Answer 1

您是否考虑过使用内容可编辑的div？

查看designMode和contentEditable以放弃使用文本区域。这样，尺寸将保持一致。

以下内容可能有效。请不要像我写的那样匆匆复制/粘贴。

<div id='your_div' onClick='toggle();'> Stuff </div>

<script>
var a_div = document.getElementByID('your_div');

toggle = function() {    
    if(a_div.designMode) {
        a_div.designMode = (a_div.designMode == false) ? true : false;
    } else {
        a_div.contentEditable = (a_div.contentEditable == false) ? true : false;
    }
}
</script>

css叠加宽度

1 个答案: