Solution here: /

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 ment 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());
}

Solution here: http://jsfiddle/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 ment 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());
}

• javascript
• jquery
• html

• 1 So like the "add ment" feature on StackOverflow? Click a button, a textarea es magically into existence, and then closes (perhaps changing something elsewhere) when a button is pressed? – lonesomeday Commented May 17, 2011 at 11:25
• 1 @lonesomeday, but, I want it to appear OVER whatever else is there. It's going to be in a grid, so I don't want everything moving around. Proly should have mentioned that part. – kralco626 Commented May 17, 2011 at 11:29
• Wait, do you want a modal? I assumed not, since you said a dialog was too intrusive, and a modal is almost as intrusive as a dialog. – Josh Leitzel Commented May 17, 2011 at 11:31
• no it does not have to be modal. I guess it could be described as a non-model dialog that opens underneath the button, but doesn't have any of that extra baggage. Just a text area, and a small simple OK button, not border, header, or something else. It would close via a "close" button or clicking outside of the text area. – kralco626 Commented May 17, 2011 at 11:34
• I apologize for the confusion, munication skills was never my #1 subject :) – kralco626 Commented May 17, 2011 at 11:35

3 Answers 3

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),
        mentField = $('<textarea/>'); // create a textarea element

    mentField
        .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 ment 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.

Basically you'll want something like this:

<button id="showarea" name="showarea" type="button" value="Show Textarea" />
<textarea id="textarea" name="text"></textarea>
<button id="textarea-ok" name="ok" type="button" value="Ok" />
<script type="text/javascript">
    $("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
    $("#showarea").click(function(){
        $("#textarea").show();
    });
    $("#textarea-ok").click(function(){
        $("#textarea").hide();
    });
</script>

Note that you'll need to define the CSS accordingly as you prefer.

try this:

<button id="showarea" name="showarea" type="button" value="Show Textarea" />
<textarea id="textarea" name="text"></textarea>
<button id="textarea-ok" name="ok" type="button" value="Ok" />
<script type="text/javascript">
$("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
$("#showarea").click(function(){
      $("#textarea").fadeIn(4000);
});
$("#textarea-ok").click(function(){
      $("#textarea").fadeOut(4000);
});

It clears the space also so it looks like new textarea created and removed