html实现点击元素的出现与隐藏 |
您所在的位置：网站首页 › 隐藏文本框的代码 › html实现点击元素的出现与隐藏 |
|
html点击元素出现隐藏提示
需要隐藏或提示的内容使用jquery完成点击元素出现提示点击元素以外提示隐藏完整的代码段
需要隐藏或提示的内容
今天想做一个网页，实现点击文本框出现文字提示，点击文本框以外的位置，即光标不在文本框的时候，提示消失。以下是想要点击的文本框内容，和提示文字 代码如下.： 姓名 使用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() } }); 完整的代码段下面是代码段 代码如下.： 姓名: 姓名 $(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() } });这样我们想要的功能就可以完成了。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |