一个注册页面（横线上输入信息（input）及其交互）

最新推荐文章于 2021-09-15 17:00:00 发布

young_Emily

最新推荐文章于 2021-09-15 17:00:00 发布

阅读量1.3k

点赞数 1

分类专栏：综合效果demo

本文链接：https://blog.csdn.net/young_Emily/article/details/77333889

版权

综合效果demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：
注册页面

交互是：默认第一行黄色，点击一行哪一行就变为黄色
动工：拿到效果图的时候，第一反应是用ul，li来布局后来布局完了之后发现点的时候没光标啊！只考虑了布局没考虑到输入的问题。。
so返工1> 解决输入，引入input框
代码结构：学号/工号文字标签，一个input框，加下面一条横线；

此时提一下，input的样式，去掉input的边框border及获取焦点的时候去掉光亮边框;

input{border: 0px;outline: none;}
//去掉input的边框border及获取焦点的时候去掉光亮边框;

交互实现：
当此行input获取焦点的时候，寻找它的兄弟节点，文字标签和横线都变色。
寻找兄弟节点：

<input onfocus="changeColor(this)" onblur="init(this)" />
function getPrevElement(node){  
        if(node.nodeType == 1){  
            return node;  
        }  
        if(node.previousSibling){  
            return getPrevElement(node.previousSibling);  
        }  
        return null;  
    }  
function getNextElement(node){  
        if(node.nodeType == 1){  
            return node;  
        }  
        if(node.nextSibling){  
            return getNextElement(node.nextSibling);  
        }  
        return null;  
    }  

var oP = getPrevElement(obj.previousSibling);
var oLine = getNextElement(obj.nextSibling);

等写好交互时，发现，左边的文字标签，右边的验证码图片，布局要配合移动端的自适应，而我当时是拿着设计图的长宽像素直接写的额（这样导致的结果是安卓那边集成之后发现打开这个就如同打开网页一样小！input框输入还会页面放大的那种==）。于是又辗转调css，全部换成百分比，字体也要跟着百分比。
<-此乃返工2

对了提一下，放大了input框之后，发现input框的光标好小[相对]！而当时”身在此山中的我”一心想着的是改变光标的位置、大小。。后来才恍悟，设置input里的字体大小就可以了，光标随着变换。

然而此时问题又出现了
这里写图片描述
我这样的交互方式有个致命的bug就是，用户只能点击input框所在的点才能获取焦点，而人们习惯性的是点击绿色框所在的区域均可获取到输入的焦点。
此时解决方案可以是在绿色的整个包裹层加个监听事件。然而我懒（吗？+安卓那边的人有点强势要得急加他们说他们的交互方式是另一种
我一看，这简单啊！于是就全部改了&&
他们的交互是：
这里写图片描述
点击那一行输入的时候那一行原本的提示字（教务处密码等）都不见了。
很明显这个是input，提示字是input自带的placeholder。然后设置下placeholder样式、显现即可

html：
<body>
    <input type="text" name="number" placeholder="学号/工号" class="active" style="margin-top: 100px;">
    <input type="password" name="password" placeholder="教务处密码" >
    <div class="getcode">
        <input type="text" name="code" placeholder="验证码">
        <span class="codepic"></span>
    </div>
    <a class="Btn">注 册</a>
    <div class="footer">
        iSWUST @2017
    </div>
</body>

js代码：

var arrInput = document.getElementsByTagName("input");
    var arrText =["学号/工号","教务处密码","验证码"];
    for(var i = 0;i<arrInput.length;i++){
        arrInput[i].index=i;
        arrInput[i].onfocus=function(){//获取焦点
            arrInput[0].className="";//将默认的第一行亮色去掉
            this.className = "active";
        }
        arrInput[i].onblur=function(){//失去焦点
            this.placeholder = arrText[this.index];
            this.className = "";
        }
    }

交互的active，点到哪一行哪一行加个active的classname；

.active{border-bottom: 2px solid #FFCA28;}

对了，还有input里面placeholder的样式：

input::-webkit-input-placeholder{color:lightgray;font-size: 46px;}
input.active::-webkit-input-placeholder {color: #FFCA28;}

最后，over
最最后，没想到一个简简单单的页面如此简洁的元素构成的页面都这么多讲究，平时应该多练习，还有很重要的是，动手写之前就应该想清楚些，页面的构造。要有下棋的意识，走完这一步要想到下好几步。

young_Emily

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
一个注册页面（横线上输入信息（input）及其交互）

横线上输入信息（input），从一个注册页面谈起
复制链接

扫一扫

专栏目录

一个注册页面（横线上输入信息（input）及其交互）

“相关推荐”对你有帮助么？