Input输入框的value属性常见处理方式

最新推荐文章于 2024-10-12 10:25:22 发布

bugsayend

最新推荐文章于 2024-10-12 10:25:22 发布

阅读量3.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42707967/article/details/114700352

版权

本文介绍了在创建登录界面时如何处理input输入框的value属性，以提供默认提示信息。通过对比，详细说明了使用placeholder属性（在移动端项目中，不支持IE6/7/8）和使用value属性结合onfocus与onblur事件实现提示信息显示与隐藏的两种方法。

摘要由CSDN通过智能技术生成

一. input输入框中value属性

通常，我们在做登录界面的时候，会有数入用户名和密码的输入框，而且我们为了用户的体验感会给数入框中设置默认的提示语，提示用户数入用户名和密码，当输入框聚焦时提示语消失，当输入框为空时提示语出现
在这里插入图片描述
聚焦效果如下：

1.1 使用placeholder属性实现（方式一）

<!DOCTYPE html>  <!--声明为html5文档 -->
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        a {
    color: blue;}
        a:link {
    color: green; text-decoration:none;}
        /* a:visited {color:green;text-decoration:none;}  */
        a:hover {
    color: red; text-decoration:underline;} 
        a:active {
    color:#f1f1f1; text-decoration:none;}
        span {
    
            height: 30