изменение ввода текста на textarea, как в Facebook

Question

Я хотел бы повторить, что вы видите обычный вводимый текст, и когда вы нажимаете его, он превращается в текстовое поле. это скрытый слой, или он на самом деле меняет ввод на textarea? как это сделать?

Answer 1

Я верю, что это всегда текстовая область, и в фокусе они просто меняют высоту текстовой области.

Редактировать: да, это так. Они используют сценарии, чтобы делать все с текстовой областью, нет поля ввода.

<textarea onfocus='CSS.addClass("c4b900e3aebfdd6a671453", "UIComposer_STATE_INPUT_FOCUSED");CSS.removeClass("c4b900e3aebfdd6a671453_buttons", "hidden_elem");window.UIComposer &amp;&amp; UIComposer.focusInstance("c4b900e3aebfdd6a671453");' id="c4b900e3aebfdd6a671453_input" class="UIComposer_TextArea DOMControl_placeholder" name="status" title="What's on your mind?" placeholder="What's on your mind?">
What's on your mind?
</textarea>

Answer 2

Один из методов, который я нашел, состоял в том, чтобы иметь текстовую область, которая начинается с меньшей ширины и высоты, а затем динамически изменять ее размер.

function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}

тогда вы вызываете свою функцию с событием onclick

onclick="function sz(this)"

Я нашел это здесь

Fellgall Javascript

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

Answer 3

Вы можете объединить виджет jQuery, который вы можете найти здесь с некоторым кодированием

Пример:

<div id="myform">
<form>
    <textarea></textarea>
    <button type="submit" style="display:none;">Post</button>
</form>
</div>
<script>
$(document).ready(function(){
    var widget = $('#myform textarea');
    var button = $('#myform button');
    var tarea = widget[0];
    // turn the textarea into an expandable one
    widget.expandingTextArea();

    var nullArea = true;
    tarea.value = "What's on your mind?"; 
    widget.focus(function() {
        button.css('display', 'block');
        if (nullArea) {
            tarea.value = "";
            nullArea = false;
        }
    });
    widget.blur(function() {
        if ($.trim(tarea.value) == "") {
            tarea.value = "What's on your mind?";
            button.css('display', 'none');
            nullArea = true;
        }
    });

});
</script>

Этот код по умолчанию будет скрывать кнопку отправки и будет отображаться только тогда, когда текстовая область сфокусирована или когда вы уже что-то написали в нее (вы можете вместо этого скрыть / показать элемент div или все, что захотите).

Answer 4

Один из способов сделать это - кодировать динамическую текстовую область. В этой статье объясняется, как это сделать: http://www.felgall.com/jstip45.htm

Еще один способ сделать это - изменить тип объекта. Допустим, вы помещаете свой входной текст в тег div (его идентификатор будет «commentBox». Код будет:

//when you click on the textbox
function makeTextArea()
{
    document.forms[0].getElementById("commentBox").innerHTML = "<textarea id=\"comments\" onBlur=\"backToTextBox()\"></textarea>";
    document.forms[0].getElementById("comments").focus();
}

//when you click outside of the textarea
function backToTextBox()
{
    document.forms[0].getElementById("commentBox").innerHTML = "<input type=\"text\" id=\"comments\" onFocus=\"makeTextArea()\"/>";
}

Answer 5

Если jQuery вообще подходит для вас, есть плагин jQuery, который делает именно это и называется Jeditable .

Ознакомьтесь с демонстрационными примерами здесь .