html实现点击元素的出现与隐藏

需要隐藏或提示的内容

今天想做一个网页，实现点击文本框出现文字提示，点击文本框以外的位置，即光标不在文本框的时候，提示消失。以下是想要点击的文本框内容，和提示文字
代码如下.：

<input name="name" id='name'  class="ui-input" placeholder="请输入姓名"> 
<div id="text"class="xs" style="display:none;" ><font size="2"  style="left: 80px; position: absolute;" >  姓名</font> </div>

使用jquery完成点击元素出现提示

使用jquery可以轻松完成想要的功能。
首先是点击出现提示部分
代码如下.：

 $(function(){
    $("#文本框id").click(function(){//按钮绑定点击事件
        $("#提示内容id").show();//文本框显示出来  注：之前设置display:none的样式
    });
                });

点击元素以外提示隐藏

通过点击外部元素，完成文本框隐藏的功能
代码如下.：

 $(document).mouseup(function(e) { 
                    var  pop = $('文本框id');  
                    if(!pop.is(e.target) && pop.has(e.target).length === 0) { 
                        // 可以在这里关闭弹窗
                        $("#提示内容id").hide()
                    }  
                });  

完整的代码段

下面是代码段
代码如下.：

<div >
<label> <span >姓名</span>:</label>
<input name="name" id='name' placeholder="请输入姓名"> 
<div id="text" style="display:none;" >
<font size="2"  style="left: 80px; position: absolute;" >  姓名</font>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
              
    $(function(){
        $("#name").click(function(){//按钮绑定点击事件
            $("#text").show();//文本框显示出来  注：之前设置display:none的样式
    });
                });
    $(document).mouseup(function(e) { 
             var  pop = $('name');  
             if(!pop.is(e.target) && pop.has(e.target).length === 0) { 
                        // 可以在这里关闭弹窗
                    $("#text").hide()
                    }  
                });  
</script>

这样我们想要的功能就可以完成了。