将文本框更改为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想再次更改，给予一定的条件或任何事件。这可以帮助用户界面认为..

有一个良好一天.....