问题描述

如下一段简单的代码，有两个疑惑请求解答一下

HTML代码：

 <form method="post" action="#" name="form">
     <label for="user_ball">运动类型</label>
     <input type="text" name="user_ball" id="user_ball" list="ball" />
     <datalist id="ball">
        <option value="篮球" />
        <option value="排球" />
        <option value="足球" />
     </datalist>
     <br /><br />
     <input type="submit" />
 </form>

CSS代码：

input{
    width:300px;
    min-height:30px;
    display:block;
    transition:all 0.5s ease-in-out;
} 

form input:valid{
    background:url("tick.gif") no-repeat 260px 0;
}

form input:focus:invaild{
    backgruond:url("cancel.gif") no-repeat 260px 0;
}

这是tick.gif图片：
这是cancel.gif图片：
JS代码：

var user_ball;
function load(){
    user_ball = document.form.user_ball;
    user_ball.addEventListener('change', checkUserBall, false);
}

function checkUserBall(){
    if(isUserBall(user_ball.value) == null){
        user_ball.setCustomValidity("请选择正确的选项");
        user_ball.validationMessage;
    }else{
        user_ball.setCustomValidity("");
    }
}

function isUserBall(str){
    if(str != '篮球' && str != '排球' && str != '足球'){
        return null;
    }
}

window.addEventListener('load', load, false);

疑惑：
1、每次运行，无论写入的是不是预定的篮球、足球、排球，都会报错，这是问什么？
2、设置了动画后，每次点击了输入框，里面的图片为何总是从左飞到右边？我不是已经设置了图片的位置为右边的吗？这个位置不是固定的吗？我又没使用animation属性

解决方案

    function isUserBall(str) {
        if (str != '篮球' && str != '排球' && str != '足球') {
            return null;
        }
        return true;//////不走上面的判断你要return true，要不返回值是undefined和null对比是true
    }

你设置了transition，由于默认背景的只是0 0，valid后变为260px 0，所以当然会有动画效果，如果不需要动画，设置好默认的背景图片位置

 input{
    width:300px;
    min-height:30px;
    display:block;
    transition:all 0.5s ease-in-out;
    background-position:260px 0;
}