0

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='a2'>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>
kiranking
  • 306
  • 11
  • 29
  • @Kiran.. i am unable to understand whats your problem is... i executed in my browser..it is working fine..when we click on rem form one then it is removing that particular one...so whats the problem – Mihir Feb 02 '11 at 08:49
  • @Mihir After removal(actually fadeout) the first visible textfield will be having value='two' or id='i2' which is form f2 right?. Then that textfield should get focused after fadeout but it is not happening. – kiranking Feb 02 '11 at 09:13

1 Answers1

0

#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.

George K
  • 1,763
  • 1
  • 9
  • 17
  • 1.Focus is triggering on only visible element(see applied filter).Once the form is fadeout it is invisible.Then first element in next form should get focused. 2.I still dont understand why there should be any additional space before <:input> – kiranking Feb 02 '11 at 09:16
  • 1
    Try focusing with setTimeOut. http://stackoverflow.com/questions/2600186/focus-doesnt-work-in-ie – George K Feb 02 '11 at 09:29
  • setTimeOut did the trick. I started with 200 and it starts working after 500 delay. But I am still don't understand about that strange SPACE behaviour(prob 1). – kiranking Feb 02 '11 at 09:45