Geek Answers Handbook

SVG element not getting focus correctly in Firefox and IE11

I created a fiddle of this so that you can see this problem for yourself. If you give the element focus, any related events will fire, but the focus is not really on the element, or at least it doesn't look like a tab brings you back through the elements. Works great on Chrome.

Here's jQuery:

$squares = $('a');

$squares.on('focus', function() {
  $(this).find('rect').attr('opacity', '.2');
}).on('blur', function() {
  $(this).find('rect').attr('opacity', '1');
});

$squares.eq(2).focus();

And here is the fiddle: http://jsfiddle.net/bigwigal/n3bf8ofe/2/

Any advice would be highly appreciated. Thank.

+4
source share
1 answer

, DOM .focus() .blur() ( JQuery) SVGAnchorElement, <a> SVG.

DOM Level 2 HTML ( ).

HTML 5 HTMLElement, HTML , -, .

SVG ( HTML5) .

, / Element. , Chrome . , , SVG2 - .

- , focus() , , . , JQuery Focus , .

, ( DOM) focus() ( , , !):

http://jsfiddle.net/n3bf8ofe/5/

var squares = document.getElementsByTagName('a');

for (var i=0,max=squares.length; i<max; i++) {
    var square = squares[i];
    square.addEventListener('focus', function() {
        this.setAttribute('opacity', '.2');
    }, square);
    square.addEventListener('blur', function() {
        this.setAttribute('opacity', '1');
    }, square);
}

try {
    squares[2].focus();
}catch(e){ console.log("Error! ", e); }

, . Document.activeElement . ( , W3 DOM, HTML5.)

. tabIndex SVG ( , SVG 2 - DOM!).

P.S., Q & A, SVGStyleElement, HTMLStyleElement.

+1

More articles:


All Articles