关于焦点事件转载笔记

最新推荐文章于 2024-07-04 13:55:51 发布

转载最新推荐文章于 2024-07-04 13:55:51 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hdg-caiqi/p/8397694.html

本文介绍了一个简单的网页交互效果——点击文本框时默认提示文字自动消失，并随着用户输入内容字体颜色变化，当文本框内容被清空时默认提示文字重新出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击隐藏文字</title>
    <style>
        input{
            width: 150px;
            height: 16px;
            color: #ccc;
            font-size: 12px;
        }
    </style>
    <script>
//  首先分析事件逻辑：
//  1.点击表单,默认字消失,并有光标显示；
//  2.输入要搜索的字，字体变深；
//  3.当清空输入的字，光标消失，默认字再次出现。
        window.onload = function () {
            function $(id) {
                  return document.getElementById(id)
            }
            //获取ID函数
            $("bdan").onfocus = function fn() {
//          获取焦点用onfocus事件。下面，用if语句判断条件是否成立。
//          当用户没有在表单输入的时候，也就是表单里面是默认字的时候，
//          清空value值，然后改变字体颜色。
                if($("bdan").value == "请输入..."){
//                    注意用“==”号，表示等于，单等号意思是赋值。
                    $("bdan").value = "";
//                    清空表单默认字
                    $("bdan").style.color = "#333";
//                    改变字体颜色
                }
            }
            $("bdan").onblur = function fn() {
//                失去焦点用“onblur”事件
                if($("bdan").value == ""){
                    $("bdan").value = "请输入...";
//                    恢复默认字
                    $("bdan").style.color = "#ccc";
//                    恢复字体颜色
                }
            }
          }
    </script>
</head>
<body>
<input type="text" value="请输入..."id="bdan"/><button id="btn">查找</button>
</body>
</html>

转载于:https://www.cnblogs.com/hdg-caiqi/p/8397694.html