今天跟大家分享一下关于input框获取焦点和失去焦点的问题。

<input id='input1' type='text' />

首先页面中有个id为input1的input框，如何让页面加载完事让其获取焦点呢？

以前我们都是用jQuery中的focus()方法。自从HTML5出现以来，出现了很多不一样的属性和标签等等，我们得跟上时代的潮流，HTML5中有一个属性，‘autofocus’，我们只需要在input中加上这个属性（就像这样<input id='input1' type='text' autofocus />），就能使其自动获取焦点。

还有一个问题就是我们如何手动让input失去或者获取焦点呢？

我看了网上解决方法都是$('#input1').focus();>>获取焦点，$('#input').blur()>>失去焦点。可是这种方法有个问题，就是当我们手动点击这个框使其获取焦点是，blur()事件会失去效果，怎么解决呢？看代码。。。

$('#input1').focusin(function(){
    setTimeout(function(){
        $('#input1').blur();
    },1000);
});
$('#input1').focusout(function(){
    setTimeout(function(){
        $('#input1').focus();
    },1000);
})

这里面运用了两个事件，focusin和focusout，这是jQuery中的事件（jQuery强大之处真是无处不在），前者是获取焦点时触发事件，后者是失去焦点时触发事件。