Question

Solution here: http://jsfiddle.net/kralco626/E9XVr/53/

Note: I think this is a duplicate of this question: how to show text area on button click? However, the OP of that question never followed up and I don’t think any of the answers actually answer the question. I think Tomalak’s comment on that question

Seems to me that, if anything, he wanted to pop up a textarea, wait for input into it, have the user press some ‘OK’ button then store the result in a variable.

Pretty much sums it up.

When the user clicks a button, I would like a text area to open in which the user can enter some text click an OK button and then the text area will close.

I don’t want a dialog box, it’s too intrusive, I want just a plain simple textarea or similar to open so that the top left of the text area is positioned at the bottom left of the button.

Thanks!

<span style="width:20px;height:20px" class="remarkButton"></span>

$(".remarkButton").button({ icons: { primary: "ui-icon-pencil" }, text: false }).click(function () {
       $(...something to show text area...).data("$clickedButton",$(this));
});

//called when the OK button on the text area is clicked
function saveRemark($referenceToTextArea)
{
$referenceToTextArea.data("$clickedButton").data("remark",$referenceToTextArea.text());
}

Answer 1

OK, I’ve knocked something up very quickly — it doesn’t exactly match your specifications, but it’s something similar. See jsFiddle.

The Javascript:

$('#foo').click(function() { // the button - could be a class selector instead
    var button = $(this),
        commentField = $('<textarea/>'); // create a textarea element

    commentField
        .css({
            position: 'absolute', 
            width: 200,          // textbox 200px by 100px
            height: 100,
            // position the textarea directly over the button
            left: button.offset().left + (button.outerWidth() / 2) - 100,
            top: button.offset().top + (button.outerHeight() / 2) - 50
        })
        // set the textarea's value to be the saved content, or a default if there is no saved content
        .val(button.data('textContent') || 'This is my comment field\'s text')
        // set up a keypress handler on the textarea
        .keypress(function(e) {
            if (e.which === 13) { // if it's the enter button
                e.preventDefault(); // ignore the line break
                button.data('textContent', this.value); // save the content to the button
                $(this).remove(); // remove the textarea
            }
        })
        .appendTo(document.body); // add the textarea to the document
});

The main difference to the specification is that the textarea closes when you press “enter”, not on clicking a button. It wouldn’t be hard to modify if that’s what you want.