原生标签的focus

使用与不使用setTimeout的代码如下：

get('makeinput').onmousedown = function() {
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('value', 'test1');

                get('inpwrapper').appendChild(input);

                input.onfocus = function() {
                    console.log("生成的input获得了焦点");
                }

                input.onblur = function() {
                    console.log("生成的input失去了焦点");
                }

                input.focus();
                input.select();

            }

            get('makeinput').onfocus = function() {
                console.log("按钮获得了焦点");
            }

            get('makeinput2').onfocus = function() {
                console.log("按钮获得了焦点");
            }

            get('makeinput2').onmousedown = function() {
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('value', 'test1');
                get('inpwrapper2').appendChild(input);

                input.onfocus = function() {
                    console.log("生成的input获得了焦点");
                }

                input.onblur = function() {
                    console.log("生成的input失去了焦点");
                }

                setTimeout(function() {
                    input.focus();
                    input.select();
                }, 0);
            }

点击按钮后：

【不使用setTimeout】控制台打印出

【使用setTimeout】控制台打印出

总结

我们会发现focus被触发了，也就是说input其实获得了焦点，但是因为我们点击了按钮，导致焦点又被按钮夺走了，才导致最终生成的效果是没有焦点的。至于为什么使用setTimeout就可以生效，这是因为同步变成了异步，焦点被按钮获得，然后input来了个回马枪，把焦点给夺过来了。

以上来源知乎

个人理解

【button、input等等html标签都有获得焦点的机会，而真正页面呈现出获得焦点的元素，必然是页面所有标签中最终获得焦点的那一个 ONLY ONE】