Question

I’m trying to hide a textarea box when a user clicks somewhere outside of it.
I’ve found this when searching: http://jsfiddle.net/dDFNM/18/

That’s exactly what I want to do, but I have multiple text boxes which will have an individual ID each (e.g. notetextarea1, notetextarea2, etc).
I don’t know much about JavaScript so I’m not really sure how to do it.

I made this function to open the textarea first of all:

function editnote(id) {
    $('#notetext' + id).hide();
    $('#notetextarea' + id).show();
}

Now I just need to swap it around, but I don’t know how to get the body click to know what textarea ID to hide.

Answer 1

Use global variable to record last textarea you were focusing on. Then on body click, get that id to hide the corresponding textarea.

var textareaID = "";

$(function() {

    $('body').click(function(event) {
        if(textareaID != '') {
            // hide last focused textarea/input
            $('#' + textareaID).hide();
        }
    });

    $('p').click(function(event) {
        event.stopPropagation();
        $('p').hide();
        $('#textEdit').show();
    });

    $('#textEdit').focusin(function() {
        textareaID = $(this).id(); // set id to global var.
    });
});

I did not test this code, but I just want to point out the idea that you can use.