CODEWITHSUNDEEP
javascripthtmlcss
daniel
daniel

Reputation: 809

changing input text to textarea just like in facebook

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?

Upvotes: 3

Views: 9004

Answers (5)

Marco Ferragina
Marco Ferragina

Reputation: 553

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

Upvotes: 1

Justin Gregoire
Justin Gregoire

Reputation: 2583

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.

Upvotes: 4

Christopher Richa
Christopher Richa

Reputation: 1295

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

Upvotes: 0

animuson
animuson

Reputation: 54757

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>

Upvotes: 6

Nick Craver
Nick Craver

Reputation: 630569

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.

Upvotes: 0

Related Questions