Geek asks and answers

Open a text area with the click of a button - jQuery

The solution is here: http://jsfiddle.net/kralco626/E9XVr/53/

Note. I think this is a duplicate of this question: how to show a text area when a button is clicked? However, the OP of this question has never been implemented, and I don’t think that any of the answers really answers the question. I think Tomalak commented on this question

It seems to me that he wanted to pop up in a text field, wait for input into it, click the "OK" button, and then save the result in a variable.

Pretty much sums it up.

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

I don’t need a dialog box, it’s too intrusive, I just want to open a simple text area or the like so that the upper left part of the text area is located in the lower left corner of the button.

Thank!

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

enter image description here

+3
source share
3 answers

Well, I quickly knocked something down - it certainly does not meet your requirements, but it is something similar. See jsFiddle .

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 value to be the saved content, or a default if there is no saved content
        .val(button.data('textContent') || 'This is my comment field\ text')
        // set up a keypress handler on the textarea
        .keypress(function(e) {
            if (e.which === 13) { // if it 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 between the specification is that textarea closes when you press enter, not the button. It would not be easy to change if you want to.

+2
source

Basically, you'll need 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>

Please note that you will need to define CSS accordingly as you prefer.

+2
source

:

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

,

-1

More articles:


All Articles