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

Question

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

Answer 1

Если jQuery - это вариант для вас, есть плагин jQuery, который выполняет только это: Jeditable.

Проверьте demos here.

Answer 2

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

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

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

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

Другой способ сделать это - изменить тип объекта. Допустим, вы поместите свой входной текст в сНу тега (его идентификатор является «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 4

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

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 5

Вы можете объединить виджет JQuery вы можете найти here с некоторым кодированием

Пример:

<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 или что угодно).