zoukankan      html  css  js  c++  java
  • 用户体验之输入框设想

       当用户在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>
  • 相关阅读:
    网络知识
    DXP 技巧和龙芯3A装机
    312-金胜维 P系列2.5寸 480G SATA3 SSD固态硬盘
    NVIDIA Jetson TK1 开发板
    NVIDIA Jetson™ TX1
    XILINX FPGA 开发板 XC3S250E 核心板 学习板+12模块
    AES-OZ745 OZ745 Zynq-7000 开发板与套件
    北京太速科技——海外代购
    AR/VR增强现实 虚拟现实,嵌入式解决方案探讨
    270-VC709E 增强版 基于FMC接口的Xilinx Vertex-7 FPGA V7 XC7VX690T PCIeX8 接口卡
  • 原文地址:https://www.cnblogs.com/xfz1987/p/5687485.html
Copyright © 2011-2022 走看看