changing input text to textarea just like in facebook

Question

i would like to replicate that you see a regular input text and when you click it changes into textarea. is this a hidden layer or is it actually changing the input to textarea? how to do it?

Answer 1

If jQuery is an option for you at all, there's a jQuery plugin that does just this called Jeditable.

Check out the demos here.

Answer 2

I do believe it's always a textarea and on focus they just change the height of the textarea.

Edit: yes, it is. They use scripting to do everything with a textarea, there is no input field.

<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

One way to do this is to code a dynamic textarea. This article explains how to do it: http://www.felgall.com/jstip45.htm

Another way to do it is to change the type of the object. Let's say you place your input text in a div tag (its ID being "commentBox". The code would then be:

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

One method that I found was to have a text area that begins with a smaller width and height and then to dynamically resize it.

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

then you would call your function with an onclick event

onclick="function sz(this)"

I found this here

Fellgall Javascript

One problem that he does mention is that this only functions on browsers that support it.