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>