9. 原生输入框实现

一、前言

输入框也是前端中不可或缺的一个控件,常用于账号、密码输入等地方。

不过还是老规矩,我们首先直接用div标签来实现一个编辑框,后面再用输入框控件来简化代码。

注意:本系列文章主要介绍的是如何通过html、css、js原生代码实现各种效果,并不会太深究某个属性、函数的用法,这个东西可以自己浏览器搜一搜就行了,前端资料可以说是各种编程语言中最丰富的了。

二、代码实现

基本操作就不再赘述了,还不会的可以参看前文,首先完成代码结构如下:

image-20231129204317467

默认情况下,div标签是没有编辑功能的,所以我们需要给它添加一个属性contenteditable,启用它的编辑功能:

image-20231129204502421

当然它的宽高也是要设置的,然后下一步,我们来慢慢调整它的样式。

1.修改样式

首先是设置一下它的边框:

image-20231129204816560

然后再取消它的轮廓,同时设置一下它聚焦时的边框颜色:

image-20231129205300023

再设置一下它的内边距和字体大小:

image-20231129205445442

内边距的目的是让文字别紧挨边框,不好看,字体大小可以自己调整到比较合适的数值。

然后再让它文本垂直居中一下:

image-20231129205642121

垂直居中的方法是让行高等于标签高度,前面也提到过,后面不再赘述了。

还可以设置一下字体颜色:

image-20231129205813571

2.添加占位符

然后还有输入框的占位符,实现起来就要稍微麻烦一点了:

image-20231129210531198

这里用到的是伪选择器,首先使用::before来创建一个.self_input标签的子标签。

F12进入控制台中元素页面,是可以看见它的:

image-20231129210800497

content属性可以给它设置文本内容,然后我们还要再将其位置调整到我们标签的中间,使用的是css的定位功能:

position: absolute;
top: 0px;
left: 10px;

注意这里使用的是绝对定位:absolute,它的定位原理是挨个往外层找到第一个也使用了定位的标签,所以我们需要在父标签中设置一个相对定位:

image-20231129211046654

相对定位是相对于自己原本位置进行移动的,但由于在self_input标签中我没有使用lelftop等偏移位置属性,所以它还是在原来的位置。

但此时它的子标签的绝对定位却能找到它作为基准,也就是前端常说的:子绝父相

通过top设置偏移0left偏移10px,就实现了让这个伪元素标签的位置放在了以父标签左上角为原点,据上边0像素,距离左边10px像素的效果,刚好比较居中。

至于颜色、字体大小就不说了,还有一个pointer-events属性,设置为none的目的是让它别触发鼠标相关的事件,免得后面影响我们标签。

至于后面两个就比较简单了:

image-20231129211731612

意思就是在self_input中内容为空的时候,将这个伪元素显示出来,不为空则隐藏。

display在基础篇提到过,可以更换标签的三种显示模式:块模式、行内块模式、行内模式。

这里用none则代表隐藏、不显示的意思。

至于这个:empty:not,也是选择器,:empty表示选择为空、没有子元素的标签,而:not意思就是取反,也就是有子元素标签、内容的时候被选中。

这样当我们输入内容时,有了内容,那么第一个:empty就不会被选中,同时第二个:not会被选中,也实现了隐藏的目的,反之同理。

3.操作内容

上面基本完成了编辑框的基本样式功能,下面我们再来看一下如何操作输入框中的内容。

首先是获取、设置编辑框中的文本内容:

image-20231129212801936

方法很简单,直接使用它上面的textContent属性即可完成设置与获取。

然后还有监视用户输入操作:

image-20231129213001228

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux