用戶體驗之輸入框設想

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。