Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    setAttribute not working

    Howdy coders,

    Anyone know why this does not work in Firefox?

    var el = document.createElement('input');
    el.setAttribute('onfocus', function() {this.blur()});

    It works in IE6. Can this work in Firefox? I've tried putting quotes around 'function()' and that doesn't work either ...

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    I don't know why that wouldn't work, but…

    You should be aware that using such a script kills the usability for keyboard users. Keyboard users alight on an element (focussing) before they actually use it (activate it). If the onfocus event is telling the browser to reject the focus, then keyboard users have no way of using that input - or any other element which uses js to reject the focus.

    I guess you're doing it to avoid the 'focus border' which some browsers implement around the focussed element. I too used to be like that, and used to implement that kind of script for links. However, since becoming aware of the consequences for keyboard users, I now only ever consider using js to reject the focus on the very rarest of occasions.

    Something to consider.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    FWIW, this is the cross-browser solution:
    Code:
    var el = document.createElement('input');
    el.onfocus = function() {this.blur();};
    But I agree with Bill, that will make the field inaccessible even using a mouse. If you explain what your ultimate reason of doing this, maybe we can suggest a better alternative for it.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by glenngv
    FWIW, this is the cross-browser solution:
    Code:
    var el = document.createElement('input');
    el.onfocus = function() {this.blur();};
    I was going to suggest that too, but a quick check turned out to be equally ineffective in FF/Mac.
    Aside from not actually working, it threw an error which Firebug listed as follows…
    [Exception... "'Permission denied to set property XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: file://localhost/Users/bill/Desktop/test.html :: anonymous :: line 22" data: no]
    Tbh, that goes straight over my head.

    Fwiw…
    The test doc used XHTML 1.0 Strict served as text/html.
    The same error was returned using HTML 4.01 Strict as text/html.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by Bill Posters
    I was going to suggest that too, but a quick check turned out to be equally ineffective in FF/Mac.
    Aside from not actually working, it threw an error which Firebug listed as follows…


    Tbh, that goes straight over my head.

    Fwiw…
    The test doc used XHTML 1.0 Strict served as text/html.
    The same error was returned using HTML 4.01 Strict as text/html.
    I think that's a bug in FF. It can be "fixed" by turning autocomplete to off.
    Code:
    var el = document.createElement('input');
    el.setAttribute("autocomplete", "off");
    el.onfocus = function() {this.blur();};

  • #6
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello again. Sorry for the delay.

    I tried all of the solutions mentioned above and none seem to work in FF1.5 for WinXp. I don't get an error or anything, it just does nothing.

    Incidentally, I am not trying to use blur() just so the focus border isn't visible. This is an admin panel that's going to be used by exactly one person who has almost no idea of web. The field in question is of type FILE. Thus I don't want her futzing around, trying to enter text in the input, I want to force her to click on the Browse button. Otherwise she might try typing it by hand.

    And since she is such a novice I doubt very much she'll be keyboard-navigating. She's a very mouse-oriented person.

    So I agree with what you are all saying in terms of usability, but in this case it's no big whoop.

    But regardless, I can't get it to work so ...

    Thanks for all your tips!
    BOb

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    If you make File input field readonly or blur onfocus, it would make the Browse button (which is also part of the field) unusable. That's what happens in IE, but in Firefox, this has no effect. It's good this doesn't take effect as File input field is a not a normal field like textbox. Why not just validate the file path in the server-side?

    You can actually use onkeydown to disallow typing but that will not fully stop the user to manually enter the path. There's the Copy-Paste operation. And you even said that the user is mouse-oriented, so most or all of the time, the user will click Browse instead of typing.

    If I were you, I will just validate the path on the server. I assume you're using a file upload script and it must have file path validation in it.

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm ive always had trouble with setattribute and event handlers...
    i think setAttribute is looking for a string not a function as you suggested (but still couldnt get to work), and in that string if 'this' is mentioned, it doesnt know what 'this' is.
    so you have to set it with event handler which takes on a function and in that fucntion you can refer to 'this' and it will know what to look at(i think).

    maybe change

    el.setAttribute('onfocus', function() {this.blur()});
    to
    el.onfocus = function temp(){ this.blur();};
    Last edited by arianhojat; 08-29-2006 at 06:07 PM.

  • #9
    New Coder
    Join Date
    May 2006
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think the second parameter of setAttribute should be a string, so:
    Code:
    elm.setAttribute("onfocus", "this.blur()");
    But I don't understand why you would want to use setAttribute for this when it's simpler to just use .onfocus. Furthermore, I don't see the point in this script at all. Is the intent to break keyboard navigation or what?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •