Home/ Questions/Q 568193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T13:09:46+00:00

How do I get the correct context set when I want to apply focus()

  • 0

How do I get the correct context set when I want to apply focus()?

What I try to do is basically this:

elemnt = document.getElementById('someFormField');
elemnt.focus('none');

Only the call to focus is generated somewhere else in the script, queued and applied when the application requests it.

function testIt() {
    var queued = {
          elementId: 'someFormField'
        , func: focus
        , args: ['none']};
    
    elemnt = document.getElementById(queued.elementId);
    
    queued.func.apply(elemnt, queued.args);
}

The above method works for other functions but for the focus method I get an error:

Opera: WRONG_THIS_ERR
Firefox: uncaught exception: [Exception… "Illegal operation on WrappedNative prototype object" (…)]

How can get this to work?

(I’m trying to understand the issue, so I’m not interested in ‘use framework X’ answers)

Update:
There seems to be some confusion about why I pass an argument to focus(): I only included the argument to show that passing an argument to focus() will not cause an error.

I might just as well have typed:

document.getElementById('someFormField').focus();

Update (2):
Because Anonymous‘s answer does not work in IE6, I’m now using an intermediate function to solve the problem:

function testIt() {
    var queued = {
              elementId: 'someFormField'
            , func: setFocus
            , args: ['someFormField']};
        
    elemnt = document.getElementById(queued.elementId);
        
    queued.func.apply(elemnt, queued.args);
}
    
function setFocus(elemntId) {
    document.getElementById(elemntId).focus();
}

If IE6 compatibility is not on your requirement sheet, Anonymous’s solution is the answer

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In the interests of avoiding confusing myself with what function does what, I would always start with a closure, until I needed to reduce memory usage:

    var dofocus = function(){element.focus()};
dofocus();

    If you’re in a loop and element is changing, you can use a function that returns another function: (function(e,m){return function(){e[m]()}})(element, method)

    Edit: On a reread of the question, I’m thinking the reason your code doesn’t work is because you’re passing in the value of some variable named ‘focus’ and not the string method name ‘focus’, or rather the focus function (is it defined elsewhere?)

    Edit: This works:

    <html><title>test</title><script>
function foo (id, method, args) {
    var d = {"id": id, "method": method, "args": args};
    // ... time passes
    var e = document.getElementById(d.id); // test exists
    var f = e[d.method]; // test exists
    var a = d.args; // test is an array
    f.apply(e, a);
}
</script><body id="thebody">
<p>
    <button onclick="foo('bar', 'setSelectionRange', [4,6]);">select</button>
    <button onclick="foo('bar', 'focus',             []);">focus</button>
    <input type="text" id="bar" value="foo bar baz">
<p>
    <button onclick="foo('thebody', 'appendChild', [document.createTextNode(new Date())]);">body</button>
</body></html>

    Edit: And if passing functions was the issue, you can always pass an optional method name and test whether the method is a string or a function, then be able to use ‘focus’ or a custom function without having to place it on the element.

    • 0