(´•ω•`๑)

物派(

关于浮动式标签的详细讲解

Pigwidgeon:

在前天我说过会写一篇详细的关于浮动式标签登陆框的文章,带点技术性,同时会暴露我的一些强迫症症状,废话不多说了,本来今晚已经被老罗的发布会给占用了一晚上的自习时间了。



这是上次放出的图,有一些地方做了改进,比如说字体颜色更加明亮饱满了,大家可以给出建议或者在下面的源码里自行调整。


先上HTML代码:



<!DOCTYPE html>


<html lang="en">


   <head>


      <meta charset="UTF-8" />


      <title>float input</title>


      <link rel="stylesheet" href="float-input-style.css">


   </head>


   <body>


      <form>


         <div class="float-input">


            <input type="text" name="username" id="username"/>


            <label for="username">用户名</label>


         </div>


         <div class="float-input">


            <input type="password" name="password" id="password"/>


            <label for="password">密码</label>


         </div>


      </form>


      <script src="float-input.js"></script>


  </body>


</html>



在这儿里HTML代码没有什么困难,只要是要注意代码中划下划线的粗体代码(Lofter没有语法高亮对我来说很痛苦),然后通过以下的CSS代码:



.float-input {


      width: 75%;


      position: relative;


      margin: 2em auto;


}



这里必须先为input外面的div设置相对定位relative。



.float-input label {


      position: absolute;


      left: 12px;


     top: 27%;


      color: #ccc;


      font: 1.4em thin helvetica, sans-serif;


      cursor: text;  


}



通过设置label的绝对定位absolute,配合left和top,将label中的文本放到了input文本框里面。


大家注意一下cursor: text; 这一句,是因为用户体验,如果不这么做,就会变成以下这样:



看到了吧,当鼠标移动到label内容的时候,鼠标不会从箭头变换为文本光标。


现在CSS还需要做的一样事情就是当光标出现在文本框时,如何将label变小并且从下往上弹出,这是简单的代码:



.float-input input:focus+label {


      font-size: 1em;


      top: -40%;


      -webkit-animation: changeLabel .4s;


      -moz-animation: changeLabel .4s;


      animation: changeLabel .4s;


}


@keyframes changeLabel {


      0% {


        opacity: 0;


        -webkit-transform: translateY(50%);


        -moz-transform: translateY(50%);


        transform: translateY(50%);


}


     100% {


        opacity: 1;


     }


}



在这一段里我使用了很多的CSS3的特性,有animation动画和transform转换,其实这些都是挺简单的如果大家了解过CSS3的这些新属性,我在这就不多累赘,我也可能讲不清,以防万一,我就讲个大概思路。


其实大家看GIF图的时候已经明白了一些逻辑,就是当光标在文本框中激活的时候(也就是focus时)label先消失了(opacity:0),然后在消失的这段时间它的字体大小变成了1em,同时位置变化了(top:-40%),而使用 transform: translateY(50%);就是为了让label像奥特曼一样从下往上窜出来,有兴趣大家可以把50%改成-50%,就会发现文字从上往下掉下来。


这就是一些比较关键的CSS代码,最后是javascript代码(其实就是设置了一些事件,动态添加两个类的事情),我把代码放出来,有兴趣的拿去试验试验完善一下,我就不多说了,这天也不早了。


一些缩进的问题我就不想纠结了,依次打空格实在麻烦。



(function() {


var input_username = document.getElementById("username");


var input_password = document.getElementById("password");


var username = "pigwidgeon";


var password = "123456";


input_username.addEventListener("focus", hasInput, false);


input_username.addEventListener("blur", checkInput, false);


input_password.addEventListener("focus", hasInput, false);


input_password.addEventListener("blur", checkInput, false);


input_username.addEventListener("keyup", changeFontSize, false);


input_password.addEventListener("keyup", changeFontSize, false);


/* 当input中的内容有字符串的时候,为input添加“hasInput”类 */


/* 这个类其实并没有太多的作用,就是当用户修改内容的时候,每次当光标转移的时候都会触发从下往上弹出label的效果 */


function hasInput() {


if(this.value) {


this.className = "hasInput";


}


else {


this.className = "";


}


}


/* 选择input的id来区分不同的input,然后再分析输入的内容是否和正确的内容相等,若正确,提供correctInput类,若错误,提供wrongInput类 */


function checkInput() {


if(this.id === "username") {


if(this.value) {


if(this.value === username) {


this.className = "correctInput";


}


else {


this.className = "wrongInput";


}


}


else {


this.className = "";


}


}


else if(this.id === "password"){


if(this.value) {


if(this.value === password) {


this.className = "correctInput";


}


else {


this.className = "wrongInput";


}


}


else {


this.className = "";


}


}


}


})( );



这里是完整的CSS代码:



form {


width: 33%;


min-width: 300px;


margin: 0 auto;


margin-top: 100px;


}


.float-input {


width: 75%;


position: relative;


margin: 2em auto;


}


.float-input input {


width: 100%;


border: 0px solid black;


border-bottom: 2px solid #ddd;


outline: none;


-webkit-transition: all .4s;


-moz-transition: all .4s;


transition: all .4s;


font-size: 1.7em;


padding: 1px 13px 3px;


}


.float-input label {


position: absolute;


left: 12px;


top: 27%;


color: #ccc;


font: 1.4em thin helvetica, sans-serif;


cursor: text; 


}


.float-input input:focus {


border-bottom-color: #6b6b6b;


}


.float-input input:focus+label,


.float-input .correctInput+label,


.float-input .wrongInput+label {


font-size: 1em;


top: -40%;


-webkit-animation: changeLabel .4s;


-moz-animation: changeLabel .4s;


animation: changeLabel .4s;


}


@-webkit-keyframes changeLabel {


0% {


opacity: 0;


-webkit-transform: translateY(50%);


-moz-transform: translateY(50%);


transform: translateY(50%);


/* 如果使用负的百分数,label文字将从上往下出现,如果是正的百分数就是从下往上 */


}


100% {


opacity: 1;


}


}


@-moz-keyframes changeLabel {


0% {


opacity: 0;


-webkit-transform: translateY(50%);


-moz-transform: translateY(50%);


transform: translateY(50%);


}


100% {


opacity: 1;


}


}


@keyframes changeLabel {


0% {


opacity: 0;


-webkit-transform: translateY(50%);


-moz-transform: translateY(50%);


transform: translateY(50%);


}


100% {


opacity: 1;


}


}


.float-input input:focus+label {


color: #f3d70b;


}


.float-input .correctInput+label {


color: #57f36f;


}


.float-input .wrongInput+label {


color: #fb5353;


}



“520,XXX”


这还有最后一句呐。

评论(1)

热度(14)

  1. (´•ω•`๑)Pigwidgeon 转载了此文字
  2. huluggPigwidgeon 转载了此文字
  3. 人根血脉Pigwidgeon 转载了此文字