CODEWITHSUNDEEP
javascriptdom-events
Jacco
Jacco

Reputation: 23759

Set correct context for focus();

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

Upvotes: 1

Views: 1097

Answers (2)

Anonymous
Anonymous

Reputation: 50339

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.

Upvotes: 1

Jerod Venema
Jerod Venema

Reputation: 44632

Read the thread here.

From that thread, we learn that using just "focus" doesn't work, like so:

focus.apply(document.getElementById('someElement'));​

(a simple case of what you're attempting) because "focus" has to have an element to which it's bound. Otherwise, it's not a bound function, but rather just a native call with no real reference. My guess is this'll be the case for any element-specific functions.

What you need to do is grab the focus element from either the target element, or another DOM element that has a focus function. For example, this will work:

var fn = document.createElement('input').focus;
fn.apply( document.getElementById('someElement') );

Upvotes: 1

Related Questions