首页 > Web开发 > 详细

JS事件之获取、失去文本框焦点

时间:2021-03-16 10:49:01      阅读:27      评论:0      收藏:0      [点我收藏+]

JS事件:https://www.w3school.com.cn/jsref/jsref_events.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .gray {
            color: #808080;
        }
        .black {
            color: #000;
        }
    </style>
    <script>
        window.onload = function () {
            //当文本框获得焦点 如果文本框内容为请输入关键字 清空文本框内容 并让字体呈黑色
            var txtSearch = document.getElementById(txtSearch);
            // 在事件处理函数中,this代表触发该函数的对象
            txtSearch.onfocus = function () {
                if (this.value === 请输入关键字) {
                    this.value = ‘‘;
                    this.className = black;
                }
            }
            // 当文本框失去焦点 如果文本框内容为空 还原文本框内容 字体呈灰色
            txtSearch.onblur = function () {
                if (this.value.length === 0 || this.value === 请输入关键字) {
                    this.value = 请输入关键字;
                    this.className = gary;
                }
            }
        }
    </script>
</head>
<body>
<input type="text" name="" id="txtSearch" value="请输入关键字" class="gray">
<input type="button" value="搜索">
</body>
</html>

 

JS事件之获取、失去文本框焦点

原文:https://www.cnblogs.com/ella-li/p/14541268.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!