请使用jQUery实现,当行文本输入框失去焦点时,如果未输入任何内容,旁边添加span标签显示"请输入内容信息"获得焦点时,删除或隐藏span

请使用jQUery实现,当行文本输入框失去焦点时,如果未输入任何内容,旁边添加span标签显示"请输入内容信息"获得焦点时,删除或隐藏span

供参考,可直接复制运行。

<!--
 * @Descripttion: 
 * @Author: baiyf
 * @Date: 2021-12-10 10:10:27
 * @LastEditTime: 2022-11-30 17:31:49
-->
<!DOCTYPE html>


<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        input {
            border: 1px solid blue;
            padding: 5px;
        }

        #tips {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <input value="" id="inv" placeholder="请输入内容" />
        <span id="tips">请输入内容信息</span>
    </div>
</body>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
    $("#tips").hide();
    $(function () {
        //失去焦点
        $("#inv").blur(() => {
            let v = $("#inv").val();
            if (!v) {
                $("#tips").show();
            }
        });
        //获得焦点
        $("#inv").focus(() => {
            $("#tips").hide();
        })
    })
</script>

</html>