changing input text to textarea just like in faceb

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

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 2

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.

Answer 3

You can combine the jQuery widget you can find here with some coding

Example:

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

This code will hide by default the post button and will show it only when the textarea is focused or when you already have written something into it (you may want to hide/show a div instead or anything you want).

Answer 4

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 5

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.