单击时将文本框更改为textarea

时间:2011-03-11 06:09:44

标签: javascript user-interface extjs textarea

如何在用户点击时将简单文本框转换为文本区域。我正在使用EXT JS。

5 个答案:

答案 0 :(得分:5)

你是为了视觉外观吗?或者是否有将其从输入转换为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/

答案 1 :(得分: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';
    }        
}

答案 2 :(得分:2)

显示和隐藏是很好的技术。但是,你可以像这样使用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>

如果你想再次改变,给出一些条件或任何事件......这可能对你有所帮助..

度过美好的一天.....

答案 3 :(得分:1)

您可以在同一个div(或表格)中对TextBoxTextArea分别设置两个控件,然后点击TextArea

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

答案 4 :(得分:0)

这是用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
         });
  });