Изменить текстовое поле на текстовое поле при нажатии

Question

Как преобразовать простое текстовое поле в текстовую область, когда пользователь щелкает по нему.Я использую EXT JS.

Answer 1

Вы делаете это только для внешнего вида? Или есть веская причина для преобразования его из ввода в 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

Вы не можете изменить текстовое поле на текстовое поле, потому что это два разных типа элементов. Однако вы можете скрыть одно и отобразить другое.

<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

Вы можете иметь два отдельных элемента управления TextBox и TextArea в одном и том же элементе (или таблице) и затем отображать TextArea при нажатии TextBox

<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
         });
  });