一、前言
输入框也是前端中不可或缺的一个控件,常用于账号、密码输入等地方。
不过还是老规矩,我们首先直接用div
标签来实现一个编辑框,后面再用输入框控件来简化代码。
注意:本系列文章主要介绍的是如何通过html、css、js原生代码实现各种效果,并不会太深究某个属性、函数的用法,这个东西可以自己浏览器搜一搜就行了,前端资料可以说是各种编程语言中最丰富的了。
二、代码实现
基本操作就不再赘述了,还不会的可以参看前文,首先完成代码结构如下:
默认情况下,div
标签是没有编辑功能的,所以我们需要给它添加一个属性contenteditable
,启用它的编辑功能:
当然它的宽高也是要设置的,然后下一步,我们来慢慢调整它的样式。
1.修改样式
首先是设置一下它的边框:
然后再取消它的轮廓,同时设置一下它聚焦时的边框颜色:
再设置一下它的内边距和字体大小:
内边距的目的是让文字别紧挨边框,不好看,字体大小可以自己调整到比较合适的数值。
然后再让它文本垂直居中一下:
垂直居中的方法是让行高等于标签高度,前面也提到过,后面不再赘述了。
还可以设置一下字体颜色:
2.添加占位符
然后还有输入框的占位符,实现起来就要稍微麻烦一点了:
这里用到的是伪选择器,首先使用::before
来创建一个.self_input
标签的子标签。
按F12
进入控制台中元素页面,是可以看见它的:
content
属性可以给它设置文本内容,然后我们还要再将其位置调整到我们标签的中间,使用的是css
的定位功能:
position: absolute;
top: 0px;
left: 10px;
注意这里使用的是绝对定位:absolute
,它的定位原理是挨个往外层找到第一个也使用了定位的标签,所以我们需要在父标签中设置一个相对定位:
相对定位是相对于自己原本位置进行移动的,但由于在self_input
标签中我没有使用lelf
、top
等偏移位置属性,所以它还是在原来的位置。
但此时它的子标签的绝对定位却能找到它作为基准,也就是前端常说的:子绝父相。
通过top
设置偏移0
,left
偏移10px
,就实现了让这个伪元素标签的位置放在了以父标签左上角为原点,据上边0像素,距离左边10px
像素的效果,刚好比较居中。
至于颜色、字体大小就不说了,还有一个pointer-events
属性,设置为none
的目的是让它别触发鼠标相关的事件,免得后面影响我们标签。
至于后面两个就比较简单了:
意思就是在self_input
中内容为空的时候,将这个伪元素显示出来,不为空则隐藏。
display
在基础篇提到过,可以更换标签的三种显示模式:块模式、行内块模式、行内模式。
这里用none
则代表隐藏、不显示的意思。
至于这个:empty
与:not
,也是选择器,:empty
表示选择为空、没有子元素的标签,而:not
意思就是取反,也就是有子元素标签、内容的时候被选中。
这样当我们输入内容时,有了内容,那么第一个:empty
就不会被选中,同时第二个:not
会被选中,也实现了隐藏的目的,反之同理。
3.操作内容
上面基本完成了编辑框的基本样式功能,下面我们再来看一下如何操作输入框中的内容。
首先是获取、设置编辑框中的文本内容:
方法很简单,直接使用它上面的textContent
属性即可完成设置与获取。
然后还有监视用户输入操作: