仿小米官网—文本框的提示文字
当我们做文本框时,为了让文本框不那么单调,我们会在文本框中提前加入提示文字。我总结了以下三个方法。
方法一:value方法
<input type="text" name="" id="" value="这是一个文本框">
value方法示例:
value方法有很明显的缺点,就是当文本框获得鼠标焦点的时候,提示文字不会自动删除。
如果想要获得鼠标焦点时提示文字自动删除,需要搭配javascript实现。
方法二:placeholder方法
<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属性就可以实现点击文字获取鼠标焦点