Change text input text in textarea, like in facebook

Question

I would like to replicate what you see in plain text input, and when you click on it, it changes to textarea. is it a hidden layer or does it really change the input to textarea? how to do it?

Answer 1

I really believe that this is always a text area, and in focus they simply change the height of the text box.

Edit: Yes, it is. They use scripts to do everything with 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 on your mind?" placeholder="What on your mind?">
What 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 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 on your mind?";
            button.css('display', 'none');
            nullArea = true;
        }
    });

});
</script>

, - (, / div ).

Answer 4

jQuery - , jQuery, Jeditable.

Check out the demo here .

Answer 5

One way to do this is to create a dynamic text box. This article explains how to do this: http://www.felgall.com/jstip45.htm

Another way to do this is to change the type of object. Let's say you put your input text in a div tag (its identifier is "commentBox". Then the code will look like this:

//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()\"/>";
}