JS——练手案例

最新推荐文章于 2023-05-21 17:51:24 发布

我在东软打代码

最新推荐文章于 2023-05-21 17:51:24 发布

阅读量280

点赞数 1

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46758732/article/details/119324634

版权

1、显示隐藏文本框的内容

<!--
1、首先需要2个新事件，获得焦点onfocus失去焦点onblur
2、如果获得焦点，判断表单里面的内容是否为默认文字，如果是默认文字，就清空表单内容
3、如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏文本框的内容</title>
    <style>
        input {
   
            color: #999;
        }
    </style>
</head>
<body>
  <input type="text" value="手机">
  <script>
      //1、获取元素
      var text = document.querySelector('input');
      //2、注册事件 获得焦点事件 onfocus
      text.onfocus = function(){
   
          console.log('得到了焦点');
          if(text.value == '手机'){
   
              this.value = '';
          }
       // 获得焦点需要把文本框里面的文字颜色变黑
          this.style.color = '#333'

      }
      //3、注册事件 失去焦点事件
      text.onblur = function(){
   
          console.log('失去了焦点');
          if(th

最低0.47元/天解锁文章

我在东软打代码

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS——练手案例

1、显示隐藏文本框的内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>显示隐藏文本框
复制链接

扫一扫

专栏目录