需要隐藏或提示的内容

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

<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>

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

html实现点击元素的出现与隐藏相关推荐

HTML点击元素以外任意地方隐藏该元素
HTML点击元素以外任意地方隐藏该元素原生javascript写法: var scheduleBox = document.querySelector('#schedule-box') docume ...
js点击元素之外的地方隐藏该元素
有时候我们会有这种情况,点击按钮(或者指定元素)显示一个菜单栏,点击按钮和菜单栏外的区域隐藏菜单栏: 主要运用阻止事件冒泡来实现:下面是全部代码: <!DOCTYPE html> < ...
jquery 点击元素以外任意地方隐藏该元素的方法
第一先实现点击任何地方都隐藏该元素(假设id="bar") $(document).click(function(){ $("#bar").hide();}); ...
Jquery点击元素外的区域隐藏元素
$(document).on('click', function(e) {if (0 == $((e.target || e.srcElement)).closest('.mask,.panel'). ...
如何获取当前点击元素的某个子元素
<div onclick="javascript:sqhys(event)"><div id="demochild"></div& ...
[react] 在React中如何判断点击元素属于哪一个组件？
[react] 在React中如何判断点击元素属于哪一个组件? 首先 import {findDOMNode} from 'react-dom' <div onClick={(e)=>{ ...
selenium点击元素位置_Selenium常见元素定位方法和操作
一. 定位元素方法官网地址:http://selenium-python.readthedocs.org/locating-elements.html 这里有各种策略用于定位网页中的元 ...
【转载】Vue -- 获取点击元素的兄弟元素
转载自 https://blog.csdn.net/Lhy_JL/article/details/109130561 一.首先 //首先是获取当前点击事件//view绑定并传递 $event<s ...
Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...

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

html点击元素出现隐藏提示

需要隐藏或提示的内容

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

点击元素以外提示隐藏

完整的代码段

html实现点击元素的出现与隐藏相关推荐

最新文章

热门文章