单击时将文本框更改为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/

你甚至可以很容易地为它制作一些额外花哨的幻想。
http://jsfiddle.net/chrisramakers/9FjGv/3/

Answer 2

您无法将文本框更改为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 3

展示和隐藏是很好的技术。 但是，你可以像这样使用innerHTML属性......

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

如果你想再次改变，给出一些条件或任何事件..这可能有助于你认为..

祝你有美好的一天.....

Answer 4

你可以在同一个div（或表）中有两个单独的TextBox和TextArea控件，然后在单击TextBox显示TextArea

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

Answer 5

这是jQuery中的一个例子。

HTML：

<tr>
    <td>
        <input name="textInputComment" type="text" value="">
        <textarea name="textAreaComment" style="display: none;"></textarea>
    </td>
</tr>

jQuery的：

 $(document).ready(function()

         $(document).on('focusin', 'input[name=textInputComment]', function () {
              $(this).hide();
              textarea = $(this).closest('tr').find('textarea[name=textAreaComment]');
              textarea.show().focus().val($(this).val());//show, focus and get value from input
         });

         $(document).on('focusout', 'textarea[name=textAreaComment]', function () {
              $(this).hide();
              textarea = $(this).closest('tr').find('input[name=textInputComment]');
              textarea.show().val($(this).val());//get value from textarea
         });
  });