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

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

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条回答 默认 最新

  • Go 旅城通票 2015-10-14 06:11
    关注
    
        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;
    } 
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题