Jquery focus function strange behaviour after fadeout_问答_开发者

Jquery focus function strange behaviour after fadeout

开发者 https://www.devze.com 2023-02-07 21:21 出处：网络

I have html code with multiple form withunique id. These form contains one input field and a anchor tag. Jquery Click event is associated with anchor tag which fadeout the parent tag ie form

I have html code with multiple form with unique id. These form contains one input field and a anchor tag. Jquery Click event is associated with anchor tag which fadeout the parent tag ie form

prob 1. The problem in this is. If there is a space(where caret symbol directing) it is working fine other wise it wont. I don't know whether it is a jquery bug.

$("form[class='multiwords'] :input:visible:enabled:first").focus();
//-------------------------^-------------------------------//

prob 2. When First form is removed focus is not setting to next textfield ie having value Two

Just an Issue. After successful focus cursor is set to beginning of textfield in opera,IE but set to end at mozilla. Is it a browser issue?

whole code

<html>
    <head>
        <title>test</title>
        <script type='text/javascript' src='js/jquery-1.4.2.js'></script>
        <script>
            $(window).load(function() {
                jQuery(document).ready(function() {
                    jQuery('.perform').live('click', function(event) {
                        var parentTag = "#"+$(this).parent("form").attr("id");
                        $(parentTag).fadeOut();
                        $("form[class='multiwords'] :input:visible:enabled:first").focus();
                    });
                });
            });
        </script>
        <style type="text/css">
            .perform{
                cursor: pointer;
            }
        </style>
    </head>

    <body>

        <div id="content">
            <form id="f1" class='multiwords' name='f1'>
                <input type=text  class="input multi" id='i1' name=da value='one'><a hred=# class='perform' id='a1'>Rem Form One</a>
            </form>
            <form id="f2" class='multiwords' name='f2'>
                <input type=text  class="input multi" id='i2' name=da value='two'><a hred=# class='perform' id='a开发者_运维问答2'>Rem Form Two</a>
            </form>
            <form id="f3" class='multiwords' name='f3'>
                <input type=text  class="input multi" id='i3' name=da value='two'><a hred=# class='perform' id='a3'>Rem Form Three</a>
            </form>
        </div>


    </body>
</html>

#1: I will suggest you use native focus() method -

var input = $("form[class='multiwords'] :input:visible:enabled:first");

if(input.length) {
     input[0].focus();
}

IE has some problems with jQuery focus method. Here is a quote from this help topic:

Triggering the focus on hidden elements causes an error in Internet Explorer. Take care to only call .focus() without parameters on elements that are visible.

#2: About caret position, it is a browser behavior. I will suggest you select text on every focus. Thus will avoid it.