仿小米官网—文本框的提示文字

三个粉丝

于 2022-01-09 15:25:58 发布

阅读量640

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/csdn_jwdlh/article/details/122393606

版权

当我们做文本框时，为了让文本框不那么单调，我们会在文本框中提前加入提示文字。我总结了以下三个方法。

方法一：value方法

<input type="text" name="" id="" value="这是一个文本框">

在这里插入图片描述
value方法有很明显的缺点，就是当文本框获得鼠标焦点的时候，提示文字不会自动删除。
如果想要获得鼠标焦点时提示文字自动删除，需要搭配javascript实现。

 <input type="text" name="" id=""  placeholder="这是一个文本框">

在这里插入图片描述
使用 placeholder 方法就不需要我们自己删除提示文字，在你开始输入内容的时候，提示文字会自动删除

<body>
    <input type="text" name="" id="inp">
    <label for="inp">邮箱/手机号码/小米ID</label>
    <script>
    </script>
</body>

定位效果示例：
在这里插入图片描述
用定位的好处就是可以改变提示文字的大小、颜色、位置。可以搭配javascript做出更好看的效果
举个栗子：当文本框获得鼠标焦点时：

注意：提示文字写在label标签里面，因为鼠标点击定位文字不能获得鼠标焦点，使用label标签的for属性就可以实现点击文字获取鼠标焦点

关注