Home/ Questions/Q 8398839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T21:08:51+00:00

I have some HTML that looks something like this: <div id=zoomed style=display:none; position:absolute;> <a

  • 0

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.net/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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.net/ZKYc3/

    Here is a version that works in FF 14

    http://jsfiddle.net/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.com/documentation/event-binding.html

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

    Updated fiddle working

    http://jsfiddle.net/sUh8G/5/

    • 0