请使用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>