InputFormTextBox setting an focus and a onblur event, in a SharePoint web part

Question

I'm making use of a bunch of InputFormTextBoxes and I'd like to have an onblur event get fired when the box is no longer in focus. This is when RichText == true.

This is because I have a Sharepoint Webpart that has a lot of editable areas and richtext is required. However, the screen gets cluttered if they are all available. So I'm making it autosave and hide the text box when the user clicks away. This saves screen real estate, and improves the page performance greatly.

I can get this to work with RichText == false, so it's just a normal TextArea HTML control. However, I can't set focus with JavaScript on the textarea, and I can't get an event to fire for the onblur event.

Answer 1

You can do this fairly easily with javascript. If I understand your requirements, you have large text areas that you want to expand and collapse dynamically as the user moves in and out of them. That way you don't take up so much real estate. I tested this code on a normal edit page with two multi-line textboxes. You'll probably need to adjust for your web part.

$(function(){
    var collapsedHeight = 18;
    var expandedHeight = 50;
    var editors = $("iframe[title='Rich Text Editor']");
    editors.attr("height", collapsedHeight);
    editors.blur(function(){
        $(this).attr("height", collapsedHeight);
    });
    editors.focus(function(){
        $(this).attr("height", expandedHeight);
    });
});