I have some HTML that looks something like this:

            <div id="zoomed" style="display:none; position:absolute;">
            <a href="#" alt="close" id="closeLink" onclick="closeZoom();" tabindex="2"><img alt="close" style="border-style:none" class="close" id="closeButton" src="Images/trans.png"/></a>
            <div class="zoomParent">
            <table>
                <tbody data-bind="with: currentFactor">
                    <tr><td class="zIngHeader" colspan="3">
                    <span data-bind="text: FactorName"></span>
                    </td>
                    </tr>
                    <tr>
                        <td class="zMin" data-bind="text: formatValues(Min)"></td>
                        <td><input type="text" data-bind="value: currentValue" class="channel" onkeydown="EnterToTabHack(event);" tabindex="1"/></td>
                        <td class="zMax" data-bind="text: formatValues(Max)"></td>
                    </tr>
                    <tr><td colspan="3" class="graphCell" data-bind="animateColor: $root.statusColor"><div id="zoomPlot" class="zoomPlotStyle"></div></td></tr>
                </tbody>
            </table>
            </div>
        </div>

Now, when you are in the text box and you hit the tab key, the anchor tags gets focus, so if you immediately hit enter, you'll run the function closeZoom(). This works fine.

What I want to do is have so if you are in the textbox and you hit enter, it will behave the same way as if you hit tab. So I have a function to do this:

    function EnterToTabHack(event) {
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
            $(".channel").blur();
            $("#closeLink").focus();
        }
    }

The blur part works fine, the value in the textbox gets written back to my viewmodel as I wanted, but the focus doesn't end up on my link. Hitting enter twice should accept the value in the textbox (which is does) and then close the window (it doesn't).

Any idea what might be wrong here? I see no error messages, but clearly the focus isn't on the anchor link like it would be if I hit tab (note: just blurring doesn't seem to do it either).

Edit: I've added a little more of the html because it may, or may not, be relevant. In particular, I'm using KnockoutJS for data binding and I think that is making it impossible to use the type of jQuery bindings (of events) that several people have suggested, or at least, if I were to use them, I'd have to rebind then every time "currentFactor" changed because I think what knockout is doing is destroying everything in the body of the table and recreating it when that part changes.

Another Edit: First, a really big thanks to everybody who has tried to help so far! I really appreciate you taking the time to take a look at this.

I played around and put together a JS Fiddle:

/

At first I was confused because, of course, it worked fine! Then I added the styles for the img and it seems that using sprites this way is what breaks it. If you remove all the img styles from the css, it works fine. With them, I can't focus it programmatically.

Anybody seen anything like that before?

I have some HTML that looks something like this:

            <div id="zoomed" style="display:none; position:absolute;">
            <a href="#" alt="close" id="closeLink" onclick="closeZoom();" tabindex="2"><img alt="close" style="border-style:none" class="close" id="closeButton" src="Images/trans.png"/></a>
            <div class="zoomParent">
            <table>
                <tbody data-bind="with: currentFactor">
                    <tr><td class="zIngHeader" colspan="3">
                    <span data-bind="text: FactorName"></span>
                    </td>
                    </tr>
                    <tr>
                        <td class="zMin" data-bind="text: formatValues(Min)"></td>
                        <td><input type="text" data-bind="value: currentValue" class="channel" onkeydown="EnterToTabHack(event);" tabindex="1"/></td>
                        <td class="zMax" data-bind="text: formatValues(Max)"></td>
                    </tr>
                    <tr><td colspan="3" class="graphCell" data-bind="animateColor: $root.statusColor"><div id="zoomPlot" class="zoomPlotStyle"></div></td></tr>
                </tbody>
            </table>
            </div>
        </div>

Now, when you are in the text box and you hit the tab key, the anchor tags gets focus, so if you immediately hit enter, you'll run the function closeZoom(). This works fine.

What I want to do is have so if you are in the textbox and you hit enter, it will behave the same way as if you hit tab. So I have a function to do this:

    function EnterToTabHack(event) {
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
            $(".channel").blur();
            $("#closeLink").focus();
        }
    }

The blur part works fine, the value in the textbox gets written back to my viewmodel as I wanted, but the focus doesn't end up on my link. Hitting enter twice should accept the value in the textbox (which is does) and then close the window (it doesn't).

Any idea what might be wrong here? I see no error messages, but clearly the focus isn't on the anchor link like it would be if I hit tab (note: just blurring doesn't seem to do it either).

Edit: I've added a little more of the html because it may, or may not, be relevant. In particular, I'm using KnockoutJS for data binding and I think that is making it impossible to use the type of jQuery bindings (of events) that several people have suggested, or at least, if I were to use them, I'd have to rebind then every time "currentFactor" changed because I think what knockout is doing is destroying everything in the body of the table and recreating it when that part changes.

Another Edit: First, a really big thanks to everybody who has tried to help so far! I really appreciate you taking the time to take a look at this.

I played around and put together a JS Fiddle:

http://jsfiddle/sUh8G/4/

At first I was confused because, of course, it worked fine! Then I added the styles for the img and it seems that using sprites this way is what breaks it. If you remove all the img styles from the css, it works fine. With them, I can't focus it programmatically.

Anybody seen anything like that before?

• javascript
• jquery
• html
• knockout.js

6 Answers 6

Ok here is a simplified fiddle, I used the js code from one of the other answers. The focus seems to work on my current browser FF 14

http://jsfiddle/ZKYc3/

Here is a version that works in FF 14

http://jsfiddle/ZKYc3/2/ this one has a alert when the closelInk is clicked. Double enter triggers the alert. Perhaps all you need to do is take the event handling out of the html and leave it up to jquery to take care of

Update: see http://knockoutjs./documentation/event-binding.html

I think you should probably follow that since you are using knockout

Updated fiddle working

http://jsfiddle/sUh8G/5/

This is set the focus to #closeLink

$('.channel').on('keydown', function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) {
        e.preventDefault();
        $('#closeLink').focus();
    }
});

You don't have to set the onkeydown="EnterToTabHack(event);" in the input. The outline does not always show around the URL but the function will focus() the link. The preventDefault is because the link would trigger when the keyup happens.

function EnterToTabHack(event) {
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
            $(".channel").blur();
        }
    }    

$(".channel").blur(function() {
      $("#closeLink").focus();
    });

I would take the onclick and onkeydown out of your html elements...

<a href="#" id="closeLink" tabindex="2"><img class="close" style="border-style:none" id="closeButton" src="Images/trans.png"/></a>

<input type="text" data-bind="value: currentValue" class="channel" tabindex="1"/>

and use jquery to wire up these events...

$(function(){
    $('#closeLink').click(closeZoom);

    $('.channel').keypress(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
           $(".channel").blur();
           $("#closeLink").focus();
        }
    });
});

I used keypress here instead of keydown, because keydown will focus the link, and then keyup will fire the click event. If this is the behavior you want, use keydown. Otherwise, keypress will set the focus to the link, and the second enter press will fire the click event.

use the keyup event

<a href="#" id="closeLink" onclick="closeZoom();" tabindex="2" ><img alt='testtesttest' class="close" style="border-style:none" id="closeButton" src="Images/trans.png"/></a>

<input type="text" data-bind="value: currentValue" class="channel" onkeyup="EnterToTabHack(event);" tabindex="1"/>

then the js

function EnterToTabHack(event) {   
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {        
            $("#closeLink").focus();
        }
}

http://jsfiddle/wirey00/KcRyV/

This looks fine, but your last line$("#closeLink").focus();

should be changed to this:$("#closeLink").click();