remove掉div层后光标无法聚焦

最新推荐文章于 2024-01-12 10:01:48 发布
原创 最新推荐文章于 2024-01-12 10:01:48 发布 · 367 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#remove掉div层后光标无法聚焦

本文介绍了一个使用JavaScript动态创建div并嵌入iframe时遇到的问题：当通过div.remove()移除元素后，页面上的光标无法正常聚焦。文章提供了解决方案：在移除div之前清空iframe的src属性。

问题：用js动态创建一个div，然后在div中创建iframe子节点。

移除div层时发现，div.remove()后光标无法聚焦，只有用tab键后光标恢复

我的解决方案：$('#referenceContent').attr('src','');//移除div前先删除iframe的src属性

后在移除div.remove()；

结果：光标无法聚焦问题解决

使用jQuery移除多个div元素
git_web425的博客
09-26 321
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作的过程，并提供了丰富的功能和便捷的语法。首先，我们通过选择器选中要移除的元素，然后使用remove()方法进行移除操作。首先，我们使用jQuery的选择器来选中要移除的元素。然后，我们分别选择了ID为div1和div3的元素，并使用remove()方法将它们移除。接下来，我们假设页面中有多个div元素，我们想要移除其中的一些。每个div元素都有一个唯一的ID，可以使用这个ID来选择要移除的元素。在上面的代码中，我们使用了。
1021. Remove Outermost Parentheses删除最外层的括号
weixin_33893473的博客
04-08 168
网址：https://leetcode.com/problems/remove-outermost-parentheses/ 使用栈的思想，选择合适的判断时机 class Solution { public: string removeOuterParentheses(string S) { stack<char> s_ch; ...
div 清空及删除
u010033827的博客
06-26 1718
function clearPrintDiv1(){  $("#printFlagDiv1").remove();  $("#printFlagDiv").empty();  $('#editPrintTable1 #lb').html(''); }
div获得/失去焦点
hxy793518971的博客
05-20 1万+
div获得/失去焦点 div标签默认是没有焦点的，但是当出现以下类似问题时，就需要将div设置为可操作元素，从而使其获得焦点     当出现如 使用div/ul制作自定义下拉选 div中两个元素绑定一个事件时     就需要为div设置属性使其变为可操作元素（以下使用第一种情况作为案例） <div id...
用jquery在div中动态添加/删除元素
DHogan的博客
06-19 9709
$(document).ready(function(){ $("#append").click(function(){ var p = "This is append p";//添加元素的html代码 $("#div1").append(p); //调用append函数添加元素 }); $("#clear").click(function(){ var p
html div remove,Add/remove HTML inside div using JavaScript
weixin_36282765的博客
06-16 165
function addRow() {var inputName, inputValue, label, checkBox, checked, inputDecrease, content, Ptag;// divcontent = document.getElementById('content');// P tagPtag = document.createElement('p');// fi...
tiptap react NodeViewWrapper手动实现节点。pinyin-pro div标签实现汉字上下注音， 光标与汉字对齐，单个汉字和拼音对应一个节点
最新发布
11-26
在`RubyComponent`中，我们已经通过`onClick`事件将光标聚焦到节点位置。为了在节点被选中时添加样式，我们可以监听节点的选择状态： ```jsx // 在RubyComponent.jsx中 import { useSelected } from '@tiptap/react...
一行代码给Button添加一个光标焦点动画：得着焦点按钮放大，失去焦点按钮恢复
穿裤子的云
01-12 765
当光标进入Button的时候，也就是Button得着焦点时，Button出现放大效果，失去焦点的时候，恢复原来的尺寸。
富文本编辑器实现一个输入框，要求这个输入框在按下'{'和'/'会触发一个下拉框展示选项，当选中这个选项后填充到输入框当前光标的位置插入，并且插入的元素为块级元素（不允许光标聚焦在里面编辑，且删除会整体删除，可以给一个浅蓝色背景颜色）
04-23
然后，用户选择下拉框中的选项后，需要将对应的块级元素插入到光标位置。块级元素可能需要是div或其他元素，并应用特定的样式（浅蓝色背景）。此外，这些块级元素需要设置为不可编辑，并且能够整体删除。不可编辑...
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head> <th:block th:include="include :: header('新增空间信息')" /> <th:block th:include="include :: datetimepicker-css" /> </head> <body class="white-bg"> <div class="wrapper wrapper-content animated fadeInRight ibox-content"> <form class="form-horizontal m" id="form-temp-add"> <input name="positionId" type="hidden" id="positionId" /> <input name="managementDeptId" type="hidden" id="managementDeptId"/> <div class="form-group"> <div class="row"> <label class="col-sm-2 control-label is-required" th:text="#{task.space.categoryName}+'：'">类别名称：</label> <div class="col-sm-2"> <input name="categoryName" class="form-control" type="text" maxlength="50" required> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.positionName}+'：'">存放地点：</label> <div class="col-sm-2"> <div class="input-group"> <input name="positionName" class="form-control" type="text" onclick="selectPosition()" id="positionName" th:placeholder="#{asset.warehouse.selectPlace}" required readonly> <span class="input-group-addon"><i class="fa fa-search"></i></span> </div> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.position2}+'：'">存放地点2：</label> <div class="col-sm-2"> <select class="area form-control m-b" data-first-title="选择二级存放地点" name="position2" id="position2" required> <option value="">请选择</option> <option th:each="position : ${position2List}" lay-search="" th:value="${position.name}" th:text="${position.name}">存放地点 </option> </select> </div> </div> </div> <hr> <div class="form-group"> <div id="element1" class="row"> <label class="col-sm-2 control-label is-required" th:text="#{task.space.position3}+'：'">存放地点3：</label> <div class="col-sm-2"> <select class="area form-control m-b" data-first-title="选择三级存放地点" name="position3" id="position3" required> <option value="">请选择</option> <option th:each="position : ${position3List}" lay-search="" th:value="${position.name}" th:text="${position.name}">存放地点 </option> </select> </div> <label class="col-sm-2 control-label" th:text="#{task.space.position4}+'：'">存放地点4：</label> <div class="col-sm-2"> <input name="position4" class="form-control" type="text" maxlength="25" th:placeholder="#{task.space.placeholderPosition4}"> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.purpose}+'：'">用途：</label> <div class="col-sm-2"> <input name="purpose" class="form-control" type="text" maxlength="50" required> </div> </div> </div> <hr> <div class="form-group"> <div class="row"> <label class="col-sm-2 control-label is-required" th:text="#{task.space.spatialProperties}+'：'">空间性质：</label> <div class="col-sm-2"> <select name="spatialProperties" class="form-control m-b" th:with="type=${@dict.getType('spatial_properties')}"> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.spatialState}+'：'">空间状态：</label> <div class="col-sm-2"> <select name="spatialState" class="form-control m-b" th:with="type=${@dict.getType('spatial_state')}"> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.spaceNumber}+'：'">空间编号：</label> <div class="col-sm-2"> <input name="spaceNumber" class="form-control" type="text" maxlength="50" required> </div> </div> </div> <hr> <div class="form-group"> <div class="row"> <label class="col-sm-2 control-label is-required" th:text="#{task.space.usingUnit}+'：'">使用单位：</label> <div class="col-sm-2"> <input name="usingUnit" class="form-control" type="text" maxlength="50" required> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.addressName}+'：'">地点名称：</label> <div class="col-sm-2"> <input name="addressName" class="form-control" type="text" maxlength="50" required> </div> <label class="col-sm-2 control-label is-required" th:text="#{asset.currency.managementDept}+'：'">管理部门：</label> <div class="col-sm-2"> <div class="input-group"> <input name="managementDeptName" class="form-control" type="text" onclick="selectDeptTree1()" id="managementDept" th:placeholder="#{asset.warehouse.selectDept}" required readonly> <span class="input-group-addon"><i class="fa fa-search"></i></span> </div> </div> </div> </div> <hr> <div class="form-group"> <div class="row"> <label class="col-sm-2 control-label is-required" th:text="#{task.space.area}+'：'">面积（㎡）：</label> <div class="col-sm-2"> <input name="area" class="form-control" type="number" required> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.usingUnitPerson}+'：'">使用单位责任人：</label> <div class="col-sm-2"> <input name="usingUnitPerson" class="form-control" type="text" required> </div> <label class="col-sm-2 control-label is-required" th:text="#{task.space.phoneNumber}+'：'">联系方式：</label> <div class="col-sm-2"> <input name="phoneNumber" class="form-control" type="text" required> </div> </div> </div> <hr> <div class="form-group"> <div class="row"> <label class="col-sm-2 control-label" th:text="#{task.space.rent}+'：'">租金：</label> <div class="col-sm-2"> <input name="rent" class="form-control" type="number"> </div> <label class="col-sm-2 control-label" th:text="#{task.space.leaseTerm}+'：'">租赁时间：</label> <div class="col-sm-2"> <div class="input-group date"> <input name="leaseTerm" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> </div> </div> <label class="col-sm-2 control-label" th:text="#{task.space.expirationTime}+'：'">到期时间：</label> <div class="col-sm-2"> <div class="input-group date"> <input name="expirationTime" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> </div> </div> </div> </div> <hr> <div class="form-group"> <div class="row"> <label class="col-sm-2 control-label" th:text="#{task.space.remark}+'：'">备注：</label> <div class="col-sm-2"> <input name="remark" class="form-control" type="text" maxlength="100"> </div> </div> </div> <hr> </form> </div> <th:block th:include="include :: footer" /> <th:block th:include="include :: datetimepicker-js" /> <th:block th:include="include :: common-js" /> <script th:inline="javascript"> var prefix = ctx + "asset/space"; var positionPrefix = ctx + "asset/escrowPosition"; var commonPrefix = ctx + "asset/common"; var count = 0; $("#form-temp-add").validate({ focusCleanup: true }); function submitHandler() { if ($.validate.form()) { var data = $("#form-temp-add").serializeArray(); $.operate.save(prefix + "/add", data); } } $("input[name='leaseTerm']").datetimepicker({ format: "yyyy-mm-dd", minView: "month", autoclose: true, endDate: new Date() }); $("input[name='expirationTime']").datetimepicker({ format: "yyyy-mm-dd", minView: "month", autoclose: true }); /* 入库资产清单-新增-选择存放地点 */ function selectPosition() { $.modal.open("选择存放地点", positionPrefix + "/positionLayer", null, null,function(index, layero) { var iframeWin = layero.find('iframe')[0]; // 执行提交方法 if (iframeWin.contentWindow.submitHandler(index, layero)) { // frame页提交成功，校验位置是否合法 // validatePositionValidate() return true; } else { console.log('错误执行！！！！') return false } }); } /* 入库资产清单-新增管理部门-选择部门树 */ function selectDeptTree1() { var treeId = $("#managementDeptId").val(); var deptId = $.common.isEmpty(treeId) ? "0" : $("#managementDeptId").val(); var url = ctx + "asset/common/selectDeptTree/" + deptId; var options = { title: '选择部门', width: "380", url: url, callBack: doSubmit1 }; $.modal.openOptions(options); } function doSubmit1(index, layero){ var tree = layero.find("iframe")[0].contentWindow.$._tree; var body = layer.getChildFrame('body', index); $("#managementDeptId").val(body.find('#treeId').val()); $("#managementDept").val(body.find('#treeName').val()); var deptId = body.find('#treeId').val(); layer.close(index); } </script> </body> </html> 这个页面中 <label class="col-sm-2 control-label" th:text="#{task.space.leaseTerm}+'：'">租赁时间：</label> <div class="col-sm-2"> <div class="input-group date"> <input name="leaseTerm" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> </div> </div> <label class="col-sm-2 control-label" th:text="#{task.space.expirationTime}+'：'">到期时间：</label> <div class="col-sm-2"> <div class="input-group date"> <input name="expirationTime" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> </div> </div> 使用了时间相关的组件，现在有一个需求，需要能清空选中的时间
11-19
另外，我们还需要注意：datetimepicker组件可能会在输入框聚焦时弹出，而我们的清除按钮不应该触发日历弹出。因此，清除按钮应该阻止事件冒泡。 实现： 修改HTML部分： 在租赁时间和到期时间的input-group中，...
使用AG Grid 的 Select 组件，实现了该功能： 下拉框是一个输入框，光标在输入框时弹出下拉选项并根据输入框的字符实时更新下拉框中的选择项
07-03
<div id="myGrid" class="ag-theme-alpine" style="height: 500px;"></div> </div> // 自定义搜索选择器组件 class SearchSelectEditor { init(params) { this.params = params; this.value = params....
Html+css
热门推荐
yjyxw的博客
05-19 1万+
Html: 拖拽建立 只有文本，html 有css之后，炫酷！ 建立文件 (.后缀)让系统去识别.html 标签： 一对标签，只能有一个 <html lang(属性名) = "en"(属性值,加双引号)> 告诉搜索 引擎爬虫，我们的网站是关于什么内容 en = 英文 zh =中文 结构化标签： <head > 思想 人看不到的 设置中文字典 <me...
html dom remove,js中dom节点删除remove方法
weixin_32143245的博客
06-25 3280
本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。1、remove方法将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。绑定的事件是否同时被移除，删除自身(无参数时)，有参数时要根据参数所涉及的范围决定。2、使用语法strong.remove()3、使用参数选择器表达式，比如remove(“.class”);remov...
DOM节点删除之remove()的有参用法和无参用法
qq_37036642的博客
08-02 892
remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。 例如一段节点，绑定点击事件 慕课网 $('.hello').on("click",fn) 如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，
jsDOM添加和删除(remove)节点
y1271760083的博客
01-28 1万+
这段代码创建新的 元素： var para=document.createElement("p"); 如需向 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点： var node=document.createTextNode("这是新段落。"); 然后您必须向 元素追加这个文本节点： para.appendChild(node); 最后您必须向一个已
jquery中删除元素的remove（）方法
Black_Customer的博客
09-15 3318
今天看jquery中删除元素的方法，包括remove（）方法和empty() 方法 remove（）方法为删除被选元素及子元素 empty() 方法为删除元素中的子元素 其中remove（）方法还有一个是过滤的作用，可以筛选出符合要选的元素 例如： $(document).reday(function(){ $("p").remove(".p1");//p1为一个p元素 }); 那么会删除名为p...
DOM节点删除remove()的有参用法和无参用法
qq_43742368的博客
05-26 747
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="../jquery-1.10.2.min.js"></script> <script type="text/javas
div中删除指定元素
歪西的博客
11-24 3000
1     2     3     4     5 js: function delete(){  var childList = document.getElementById('div1').childNodes; document.getElementById('div1').removeChild(childList[i]);  }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值