• 用户体验之输入框设想


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

    那么,对于前端的用户体验来讲,有一种设想是这样的:

       当用户鼠标移动到输入框时,我们给这个输入框设定一个时间阈值(给用户提供一个将手从鼠标移动到键盘的时间),该输入框自动获取焦点;当鼠标移开时,失去焦点

       拓展:很长一段时间,项目中涉及到的表单验证,大多情况下,输入框一失去焦点,马上就检验,这样看起来,是为用户增强体验,方便用户,其实不然,真是画蛇添足,好的体验,应该是,在统一提交前,再做检验。“一手打火机,一手小表单,哪里不对,点哪里,妈妈再也不用担心我处理小婊砸了”。

       废话不多说,直接上代码,就是这么干脆(该代码只是为了实现移动鼠标可以输入的感觉)

       

    <!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>
  • 相关阅读:
    webkit v8 chromium blink chrome 的关系
    webkit 系列
    工具使用过程中遇到问题
    ElasticSearch实战笔记
    办理北京市居住证需要哪些资料
    办理北京市居住证需要哪些资料
    MongoDB 笔记
    Javascript问题集锦
    sqlserver2016 management tool v18
    PostMan测试Web Service
  • 原文地址:https://www.cnblogs.com/xfz1987/p/5687485.html
Copyright © 2020-2023  润新知