將文本框更改爲textarea點擊

Question

如何在用戶點擊時將簡單的文本框轉換爲文本區域。我正在使用EXT JS。

Answer 1

你只是爲了視覺效果嗎？或者有沒有把它從輸入轉換爲textarea的有效理由？

如果你只是爲了它的視覺效果，你可以通過設置textarea的高度並在焦點事件中增加高度來獲得很長的路。

Ext.onReady(function(){ 

    new Ext.form.TextArea({ 
     renderTo: Ext.getBody(), 
     name: 'myTextArea', 
     width: 200, 
     height: 22, 
     listeners: { 
      focus: function(textarea){ 
       textarea.setHeight(200); 
      }, 
      blur: function(textarea){ 
       textarea.setHeight(22); 
      } 
     } 
    }); 

}); 

編輯：這些停止工作：

這裏試試：http://jsfiddle.net/chrisramakers/9FjGv/2/

你甚至可以很容易地製作動畫一些額外的花哨visualy看中pancy。
http://jsfiddle.net/chrisramakers/9FjGv/3/

Answer 2

你可以有TextBox和TextArea兩套獨立的控制在同一div（或表），然後顯示TextArea上的TextBox

<input type='text' onclick='document.getElementById("txtArId").style.display = ""' /> 
<TextArea id='txtArId' /> 

Answer 3

點擊您無法將文本框更改爲，因爲他們一個textarea是兩種不同類型的元素。但是，您可以隱藏其中一個並顯示另一個。

<input type='text' id='myTextBox' /> 
<textarea id='myTextArea' /> 

對於某些功能，可以交換它們在任何你想要的事件：

function swapTexts() { 
    var tb = document.getElementById('myTextBox'); 
    var ta = document.getElementById('myTextArea'); 
    if (tb.style.display !== 'none') { 
     tb.style.display = 'none'; 
     ta.style.display = ''; 
    } else { 
     tb.style.display = ''; 
     ta.style.display = 'none'; 
    }   
} 

Answer 4

顯示和隱藏是好的TECHNIC。但是，u可以使用文字屬性也是這樣......

<div id='test'> <input type="text" name="text1" id="text1" onclick="test()"/></div> 

<script type="text/javascript"> 
function test() 
{ 
    document.getElementById('test').innerHTML = "<textarea></textarea>" 
} 
</script> 

如果u想再次更改，給予一定的條件或任何事件。這可以幫助用戶界面認爲..

有一個良好一天.....