显示隐藏文本框内容 

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2022/7/22
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>Title</title>
    <style>
        div{
            position: relative;
        }
        div::after {
            content: '搜索';
            background-color: blue;
            height: 30px;
            width: 60px;
          position: absolute;
            border-radius: 5px;
        }
        input{
            height:30px;
            border: 1px solid blue;
            border-radius: 5px;
            color: #aeaeae;
        }
    </style>
</head>
<body>
<%--当鼠标点击文本框时，里面的默认文字隐藏，当 鼠标离开文本框时，里面的文字显示；
onfocus：获得焦点
onblur：失去焦点--%>
<div>
    <input type="search" value="手机">
</div>
<script>
    var search=document.querySelector('input');
    search.onfocus=function () {
        if(this.value === '手机'){
            this.value = '';
        }
        this.style.color='#333'
    }
    search.onblur=function () {
        if(this.value === ''){
            this.value = '手机'
        }
    }
</script>
</body>
</html>

 

posted @ 2022-07-25 09:16  晓葡萄在路上  阅读(76)  评论(0)    收藏  举报