jQuery form focus following element creation

问题

Looking for some assistance with my jQuery code.

I am creating a modal box, using the simplemodal plugin

I am managing to create a modal box on the click of an element, which contains a form....I would like the form to have focus on the textarea field when it appears, but am unsure of how to achieve this..

Here is my current code..

    $('#showModal a').live('click',(function(){
      // Build Modal Box Container And Add to Page      
        $('<div id="osx-modal-content">\
            <div id="osx-modal-title"><h2>Please explain this song.</h2></div>\
            <div id="osx-modal-data"> \
            <p class="loaderGif"> <img src="http://localhost:8500/mxRestore/images/ajax-loader.gif"> </p>\
         </div>\
         </div>').appendTo('body');

         //Set Modal Box Options                
        $("#osx-modal-content").modal({
                // OPTIONS SET HERE
                overlayClose:true,
                onOpen:OSX.open,
                onClose:OSX.close
            });

         // I have a hidden form on the page...grab its HTML!!
         var modalForm = $('#addTmWrapper').html();

         // Dynamically build a text area and add to the form...
         // The text area from my hidden form wont show properly for some reason.....maybe a coldfusion issue

         var textField= ''
         textField+= '<textarea name=' + '"sMessage"' + 'id="sMessages"' + 'cols="62"' + 'rows="3"' + 'class="textarea word_count">' + '</textarea>'

         // Add hidden form to modal box, add textarea to form..
         // Then show it                    
         $('#osx-modal-data').html(modalForm ).find('#addTmForm')
                .prepend(textField)
                .show();
    return false
}));

Wondering how I can make the textarea have focus when the modal box appears?

Any help would be appreciated, thanks

回答1:

To give focus to a form element, use focus().

$('#myElement').focus()

回答2:

try this:

var aSet = $('selector');
aSet[0].focus();

the focus above applies to Element not jQuery Object.

回答3:

Just before return false;, add $('#sMessages').focus(); (see jQuery docs).

回答4:

use

$('selector').trigger('focus');

instead of

$('selector').focus();

( $(...).focus(function() {}) binds a function to focus event not doing focus.)

回答5:

Wrap it in a timeOut to get it to work: as done here

setTimeout(function(){
    $('selector').focus();
}, 0);

来源：https://stackoverflow.com/questions/2349137/jquery-form-focus-following-element-creation

标签

jquery

focus