开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在焦点输入上显示隐藏div

在焦点输入上显示隐藏div可以通过以下步骤实现：

首先，在HTML中创建一个包含焦点输入的元素和要隐藏的div的容器。例如：

<div>
  <input type="text" id="input" onFocus="showDiv()" onBlur="hideDiv()">
  <div id="hiddenDiv" style="display: none;">
    <!-- 隐藏的内容 -->
  </div>
</div>

在JavaScript中定义两个函数，一个用于显示隐藏的div，另一个用于隐藏div。例如：

function showDiv() {
  document.getElementById("hiddenDiv").style.display = "block";
}

function hideDiv() {
  document.getElementById("hiddenDiv").style.display = "none";
}

在上述代码中，onFocus属性指定了当焦点输入元素获得焦点时调用showDiv()函数，onBlur属性指定了当焦点输入元素失去焦点时调用hideDiv()函数。

这样，当焦点输入元素获得焦点时，隐藏的div将显示出来；当焦点输入元素失去焦点时，隐藏的div将被隐藏起来。

注意：以上代码只是一个简单的示例，实际应用中可以根据需求进行修改和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何在不影响asp.net默认安全性的前提下使用ckeditorfckeditor?

validateRequest="false"> 这样虽然解决了问题，但是同时也降低了安全性，如何在不降低...思路: 客户端--表单中增加一个隐藏域，提交时先把ckeditor/fck的内容用url编码后，赋值给该隐藏域，然后清空ckeditor/fck，再提交，这样提交过去的内容就不包含html源代码了。...如果您的浏览器不支持或禁止运行Javascript，您只能用常规方式在普通文本输入框里编辑html代码 ... <input type="button" value="设置<em>焦点</em>...ckeditor工具库的htmlEncode方法 } //设置ckeditor的<em>焦点</em>，并高亮背景<em>显示</em> function setFocus() {

2.1K9 0

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

*** END *** 浏览器直接显示为 *** START *** *** END *** 4.无法获取焦点本来无一盒，何处惹焦点呢^_^即使通过tab键也是没办法的...-- 真心不会获得焦点 --> hidden 5.无法响应任何事件，...深入visibility visibility有两个不同的作用用于隐藏表格的行和列用于在不触发布局的情况下隐藏元素 4个有效值 1.visible 没什么好说的，就是在界面上显示。...3.collapse 用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样，用于其他元素上时则效果与visibility:hidden一样。...2.和display:none一样无法获得焦点 3.可在冒泡阶段响应事件由于设置为visibility:hidden的元素其子元素可以为visibility:visible，因此隐藏的元素有可能位于事件冒泡的路径上因此下面代码中

1.4K3 1

JQuery高级应用

动画三种方式显示和隐藏元素默认显示和隐藏方式 show([speed,[easing],[fn]]) ：显示参数： speed：动画的速度。..."button" value="点击按钮隐藏div" onclick="hideFn()"> div显示和隐藏 $("#showDiv").show("...$("#name").focus(); //让文本输入框获得焦点表单对象.submit(); //让表单提交 });

5.9K3 0

JQuery 文本输入框放大镜效果

通过JS不断的监听输入框值的变化(通过jquery中的keyup事件)，有值的话把内容值赋值给那显示div上去。...3.如果输入框值为空则隐藏掉放大效果div元素，否则反之！...5.绑定点击焦点和失去焦点事件。(点击焦点显示，失去焦点隐藏)等等。 2. 格式化一下显示方式：代码如下： ?...比如我输入 11122233344 且只能显示11个数字的话，假如我用 "-"分隔符拆分规则是：splitType:[3,4,4] .那么显示方式应该是:111-2223-3344 当然也可以用其他的分隔符显示...输入框放大镜的demo <div style="margin-left:56px; margin-top

2.7K3 0

常用的键盘事件

，文本框上面自动显示大字号的内容。...案例分析　　快递单号输入内容时，上面的大号字体盒子（con）显示(这里面的字号更大）表单检测用户输入：给表单添加键盘事件同时把快递单号里面的值（value）获取过来赋值给... con盒子（innerText）做为内容如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 123 ...'none'; }) // 给输入框注册获得焦点事件 jd_input.addEventListener('focus', function()

3.1K1 0

常用的键盘事件

注意：触发获得焦点事件，可以使用元素对象.focus() // 获取输入框 var search...，文本框上面自动显示大字号的内容。... 123 <input type="text" placeholder="请<em>输入</em>您的快递单号...= this.value; } }) // 给<em>输入</em>框注册失去<em>焦点</em>事件，<em>隐藏</em>放大提示盒子 jd_input.addEventListener...('blur', function() { con.style.display = 'none'; }) // 给<em>输入</em>框注册获得<em>焦点</em>事件

1.5K3 1

Web APIs第二天

淘宝点击关闭二维码 // 核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素 <img src="images...小米搜索框案例 ①开始下拉菜单要进行<em>隐藏</em> ②表单获得<em>焦点</em> focus，则<em>显示</em>下拉菜单，并且文本框变色（添加类） ③表单失去<em>焦点</em>，反向操作 //需求：当表单得到<em>焦点</em>，<em>显示</em>下拉菜单，失去<em>焦点</em><em>隐藏</em>下来菜单 <...微博<em>输入</em>案例 ①判断用<em>输入</em>事件 input ②不断取得文本框里面的字符长度 ③把获得数字给下面文本框 //需求：用户<em>输入</em>文字，可以计算用户<em>输入</em>的字数 <<em>div</em> class...Tab栏切换 ①点击当前选项卡，当前添加类，其余的兄弟移除类，排他思想 ②下面模块盒子全部<em>隐藏</em>，当前的模块<em>显示</em> //需求：点击不同的选项卡，底部可以<em>显示</em> 不同的内容 <<em>div</em> class="wrapper...点击随机显示图片 8. 同意协议按钮 9. 验证码倒计时 10. 显示隐藏密码

1.1K6 0

常用键盘事件

注意：触发获得焦点事件，可以使用元素对象.focus() // 获取输入框 var search...，文本框上面自动显示大字号的内容。 ... 123 <input type="text" placeholder="请<em>输入</em>您的快递单号...= this.value; } }) // 给<em>输入</em>框注册失去<em>焦点</em>事件，<em>隐藏</em>放大提示盒子 jd_input.addEventListener...('blur', function() { con.style.display = 'none'; }) // 给<em>输入</em>框注册获得<em>焦点</em>事件

1.5K2 0

jQuery Cheat—Sheet（jQuery学习笔记）

; }); 获得焦点事件当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。...---- #jQuery 效果隐藏和显示 jQuery hide() 和 show() jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示...可选的 callback 参数是隐藏或显示完成后所执行的函数名称。...显示被隐藏的元素，并隐藏已显示的元素： //点击button隐藏p标签，再次点击显示 $("button").click(function(){ $("p").toggle(); }); 淡入和淡出...$(“#flip”).click(function(){ $(“#panel”).slideToggle(); //若panel已经展开，则上滑隐藏；若已隐藏，则下滑展开 }); ### 动画

16.2K3 0

组件化详细

$refs.chartRef) } vue异步更新、$nextTick 需求编辑标题, 编辑框自动聚焦点击编辑，显示编辑框让编辑框，立刻获取焦点 “显示之后”，立刻获取焦点是不能成功的！...，输入框获取焦点 (2) 失去焦点，隐藏输入框 (3) 回显标签信息 (4) 内容修改，回车 → 修改标签信息实现双击显示输入框，并且获取输入框的焦点首先，双击显示输入框，我们可以通过双点击事件...dblclick="handleClick"实现，然后在实现的函数中通过使v-if的内容为true，实现点击显示输入框获取输入框的焦点可以有两种方式：方式一：通过双击，然后在其中的函数里通过...:value="values"绑定 v-focus 自动聚焦的方法二：在main.js中封装全局指令 @blur="isEdit = false" 失去焦点隐藏...-- (1) 双击显示输入框，输入框获取焦点 (2) 失去焦点，隐藏输入框 (3) 回显标签信息信息是由外部父组件传入的 (4) 内容修改，回车 → 修改标签信息 --

1431 0

JavaScript案例：按键输入内容，模拟自动大字号

使用键盘事件对象里面的keyCode判断用户按下的是否是s键输入框获得焦点，使用js中的focus()方法 var...，文本框上面自动显示大字号的内容。...输入内容时，上面的大号字体盒子（con）显示（这里面的字号更大）表单检测用户输入：给表单添加键盘事件同时把表单里面的值（value）获取过来赋值给con盒子（innerText）作为内容如果表单输入框里面的内容为空...，则隐藏大号字体盒子（con）当我们失去了焦点，就隐藏这个con盒子当我们获得焦点，并且文本框内容不为空，就显示这个con盒子。...class="search"> 123 <input type="text" placeholder="请<em>输入</em>内容" class

1.7K5 0

事件基础及操作元素

innerText改变元素内容显示当前系统时间某个时间 1123 ...获取属性的值元素对象.属性名设置属性的值元素对象.属性名 = 值表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。...案例：仿京东显示密码 ?...44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; } 案例：显示隐藏文本框内容..."message">请输入6~16位密码 // 首先判断的事件是表单失去焦点 onblur // 如果输入正确则提示正确的信息颜色为绿色小图标变化

1.4K2 0

Angularjs基础(十一)

ng-focus 　　　　　　　　规定焦点事件的行为　　　　　　　　　　实例：当输入框获取焦点时执行表达式：　　　　　　　　　　　　<input ng-focus="count = count...ng-form 　　　　　　　　指定HTML表单继承控制器表单 ng-hide 　　　　　　　　　　<em>隐藏</em>或<em>显示</em>HTML 　　　　　　　　实例：在复选框选中时应从一部分；　　　　　　　　<em>隐藏</em>...如果if语句执行的结果为true，会添加移除元素，并<em>显示</em>。　　　　　　　　　　　　ng-if 指令不同于ng-hide, ng-hide<em>隐藏</em>元素。...实例：转换用户的<em>输入</em>为数组。　　　　　　　　...实例：绑定<em>输入</em>的值到scope变量中；　　　　　　　　　　　　　　　　　　　　　　　　　　<input

2.3K5 0

jQuery学习笔记

file]一样； :checkbox：可以选择复选框，和input[type=checkbox]一样； :radio：可以选择单选框，和input[type=radio]一样； :focus：可以选择当前输入焦点的元素...，例如把光标放到一个上，用$('input:focus')就可以选出； :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type...=radio]:checked')； :enabled：可以选择可以正常输入的、等，也就是没有灰掉的输入； :disabled：和:enabled正好相反，选择那些不能输入的...修改CSS jQuery对象有“批量操作”的特点用于修改css比较方便如果是js还需要遍历的添加class属性在做过了几个案例中很多都需要添加class属性 addClass()添加属性显示和隐藏...DOM jQueryshow()和hide()方法上图获取到JavaScript之后将其隐藏显示同理获取DOM信息 jQuery可以获取DOM的高宽等信息 // 浏览器可视窗口大小: $(window

1.3K4 0

JQuery 入门学习(一)

比如，getElementById(xxx)就是获得id为xxx的对象，它可能就是一个div标签。我们用面向对象的思想来看，实际上获得的是一个id为xxx的div对象。...这个对象实际上就是从到相应这所有的内容。通过这个对象的相关方法就能很方便地直接操作html文件。 ...隐藏和显示和动画效果 Jquery自带了一些动画效果，通过一些参数就能显示出来。...我也只是改了一句话：$("div#exm").hide('slow'); 将id=exm的div元素隐藏，并且是慢慢隐藏，因为有'slow'参数。 ...hide方法就是隐藏一个元素所有内容的方法。它有一个参数，表示隐藏的快慢。当然有hide方法就有show方法，用法一样。还有一个方法toggle，表示在隐藏和显示中切换。

1.6K1 1

vue封装带提示框的单选多选文本框组件

提示框显示隐藏交互实现细化上述需求，需要在用户点击输入框(获取焦点)时，显示提示框，在用户点击空白区域时隐藏提示框，点击组件自身时不做任何操作。...组件的模板结构如下，通过show变量控制提示框的显示与隐藏，在组件的输入框绑定聚焦和失焦事件： @focus="onfocus" 和 @blur="onblur"，在focus时设置变量show为true... 此处有一个小小的细节，由于选项元素在输入框外，用户点击输入框外的选项元素必然会导致输入框失焦从而触发blur自动关闭，如下图所示。...blurEvent () { setTimeout(() => { this.show = false }, 200) } **问题：**实际开发过程中发现，延时器延时执行关闭操作，导致输入框获取焦点后...**问题2：**上述操作只考虑了点击事件的关闭，忽略了其他可能需要关闭的情况，如使用tab按键切换输入框时也需要能正常显示与隐藏提示框。

7.7K3 0

第 013 期优化移动端输入框占位符的交互体验 - CSS :placeholder-shown

在移动端，如果标签和输入框在一行中显示，显示的有点窄。 ? 如果标签和输入框各占一行显示，又浪费空间。有没有两全其美的方案呢？ Material Design 提供了一个两全其美的方案。...输入框没有值时，标签在输入框中显示。在输入框中有值或获得焦点时，标签在上方显示。如下图所示: ? 解决方案可以用 CSS 的 :placeholder-shown 伪类可以实现上面的效果。...:placeholder-shown 作用于显示占位符时的元素。输入框在有值或获得焦点时，不显示占位符，可以用选择器 :not(:placeholder-shown) 匹配。...label class="input-label">name 第 1 步隐藏浏览器默认的 placeholder。...(即获得焦点或有值)时的样式。

1K2 0

JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）

1 JQuery动画 JQuery有三种方式显示和隐藏元素： 1）默认显示和隐藏方式： --show([speed, [easing], [fn]]) --hide([speed...div" onclick="hideFn()"> div显示和隐藏 ?......") // $("#name").focus();//让文本输入框获得焦点 //表单对象.submit();//让表单提交 });

9.4K2 0

本周作业--弹出窗口 beta1.0--讲解(1)

image.png 看作业需求： 1，添加一个自定义的下拉列表，里面可以选择城市，城市名自选； 2，选择不同城市，弹出窗口的内容区显示不同城市名； 3，在城市名的下一行，是城市的tab标签的输入框。...即你对城市的看法，好看啊，不好啊，挤啊，堵车啊，，之类的 4，输入文字后，焦点离开输入框的时候，在下方添加一个兴趣的按钮。...多了不讲，就单说第一条需求，它事实上是一个按钮，和一个隐藏的DIV，DIV里面有一排UL LI的列表。当你点击这个按钮的时候，这个DIV列表显示。...流程就是这样：当你点击页面上的按钮的时候，弹出窗口显示。同时它里面的自定义select也同时显示出来了。那这个时候，你点击这个按钮，它的下拉列表不就显示出来了么！

5289 0

「Web编程API」- 04

search.focus(); } }) 1.1.4 案例：模拟京东快递单号查询要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容... 123 <input type="text" placeholder="请<em>输入</em>您的快递单号" class=...// 判断输入框内容是否为空 if (this.value == '') { // 为空，隐藏放大提示盒子 con.style.display = 'none';...= this.value; } }) // 给输入框注册失去焦点事件，隐藏放大提示盒子 jd_input.addEventListener('blur', function() { con.style.display...= 'none'; }) // 给输入框注册获得焦点事件 jd_input.addEventListener('focus', function() { // 判断输入框内容是否为空

8742 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭