用户体验之输入框设想

时间 2019-11-14

标签用户体验输入设想繁體版

原文原文链接

当用户在PC端填写表单时，须要点击输入框，以获取焦点，便于输入，或者这么说吧，根据用户的行为习惯，当用户将鼠标移动到输入框时，绝大多数状况下是要进行输入，html

那么，对于前端的用户体验来说，有一种设想是这样的：前端

当用户鼠标移动到输入框时，咱们给这个输入框设定一个时间阈值（给用户提供一个将手从鼠标移动到键盘的时间），该输入框自动获取焦点；当鼠标移开时，失去焦点jquery

拓展：很长一段时间，项目中涉及到的表单验证，大多状况下，输入框一失去焦点，立刻就检验，这样看起来，是为用户加强体验，方便用户，其实否则，真是多此一举，好的体验，应该是，在统一提交前，再作检验。“一手打火机，一手小表单，哪里不对，点哪里，妈妈不再用担忧我处理小婊砸了”。this

废话很少说，直接上代码，就是这么干脆（该代码只是为了实现移动鼠标能够输入的感受）spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .form_input{margin:15px;border:none;outline:0;border:1px solid #eee;}
        .form_input:focus{border:1px solid red;}
        .form_input.focus{border:1px solid red;}
    </style>
</head>
<body>
    姓名：<input type="text" class="form_input"><br>
    电话：<input type="text" class="form_input"><br>
    性别：<input type="radio" name="sex" value="male" checked>男
          <input type="radio" name="sex" value="female">女
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        var timer,cen = 1200;
        $('.form_input').hover(
            function(){
                var me = $(this);
                timer = setTimeout(function(){
                    me.focus();
                }, cen);
            },
            function(){
                clearTimeout(timer);
                timer = 0;
                $(this).blur();
            }
        );
    </script>
</body>
</html>