CODEWITHSUNDEEP
javascript
장민석
장민석

Reputation: 5

focus not working for div in IE

this._createPickerElement = function() {

        this.elem = document.createElement('div');
        this.elem.setAttribute("id", "myDiv");
        this.elem.classList.add('vanilla-color-picker');
        var _this = this;

        if (className) {
            this.elem.classList.add(className);
        }

        var currentlyChosenColorIndex = colors.indexOf(this.targetElem.dataset.vanillaPickerColor);

        for (var i = 0; i < colors.length; i++) {
            this.elem.innerHTML += singleColorTpl(colors[i], i + 1,
                    i == currentlyChosenColorIndex, noColor);
        }
        this.targetElem.parentNode.appendChild(this.elem);
        this.elem.setAttribute('tabindex', 1);

        var toFocus = currentlyChosenColorIndex > -1 ? currentlyChosenColorIndex : 0;

        this.elem.children[toFocus].focus();
        this.elem.children[toFocus].addEventListener('blur', this_._onFocusLost);

focus not working in IE11 when i click this.elem.children[toFocus] not fire click event, only blur fire

    this.elem.children[toFocus].focus()

is now working............
any ideas??

Upvotes: 0

Views: 1534

Answers (1)

Anonymous0day
Anonymous0day

Reputation: 3042

try to modify like that :

 /**
 * removed by edit
 * this.elem.children[toFocus].select();//<-- add this line only for HTMLInuputElement
 **/ 
this.elem.children[toFocus].focus();

Edit :

Quickly
You have to set which elements can receive a FocusEvent, by adding an tabindex on elements.

if( ! this.elem.children[toFocus].tabindex )
    this.elem.children[toFocus].tabindex = -1; // -1 to let the browser determining the order

Long :

7.4.1 Sequential focus navigation and the tabindex attribute

The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.

The tabindex attribute, if specified, must have a value that is a valid integer.

Each element can have a tabindex focus flag set, as defined below. This flag is a factor that contributes towards determining whether an element is focusable, as described in the next section.

You can read more here :

w3.org focus

Upvotes: 1

Related Questions