css覆盖宽度

Question

在这个项目中，我正在研究他们制作的div，看起来像包含数据的文本框。然后当你点击div时，它们会改变为读写文本框。发生这种情况时，文本框比原始div大小（宽度）稍大。

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

基本上，文本框是隐藏在第一个（每个屏幕1隐藏文本框）。当用户点击div时，会显示隐藏文本框并将其移动到div所在的位置（位于顶部）。当文本框文本值发生变化并移出焦点时，div的innerHTML将发生更改，然后文本框会沿着屏幕向下移动。

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

清除泥浆吧？

任何帮助表示赞赏。

Answer 1

你有没有考虑过使用内容可编辑divs？

查看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>