yishuixs
2015-10-14 05:15
采纳率: 100%
浏览 1.6k
已采纳

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

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图片:tick.gif
这是cancel.gif图片:cance.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属性

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • 最佳回答
    
        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;
    } 
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题