javascript - contenteditable - 向当前 div 添加一个类
问题描述
currentDiv
div 在按钮单击时是否有插入符号
我需要添加一个类
问题 - 如何获取当前的 div?
$('button').on('click', function(){
$(currentDiv).addClass('indent');
});
.indent{margin-left:30px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<div>lorem</div>
<div>ipsum</div>
<div>dolor</div>
</div>
<button>CLICK</button>
解决方案
您可以使用Range和startContainer
属性来获取光标指向的元素:
const contenteditable = $('[contenteditable]');
$('button').on('click', function(e) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var elem = range.startContainer.parentNode;
$(elem).addClass('indent');
});
.indent {
margin-left: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<div>lorem</div>
<div>ipsum</div>
<div>dolor</div>
</div>
<button>CLICK</button>
推荐阅读
- c# - dotnet core 和 Ubuntu 的 TypeInitializationException / SSL 库问题
- python - 我的电报机器人在个人聊天中回答,但不在群聊中。为什么?
- html - 使网格页面的整个部分具有不同的背景颜色
- sql - 基于开始和结束日期的 Oracle SQL 数据迁移
- java - notifyDataSetChanged 在 kotlin 的适配器中不起作用
- java - 运行时的 GUI 与 NetBeans GUI 构建器上的设计 GUI 不同
- jdbc - JDBC 属性 - 全有或全无
- python - RuntimeError:事件循环已关闭“Launcher.killChrome”从未等待,如何解决?
- javascript - 使用一个正则表达式的字符串后面的项目的多次匹配
- javascript - 在 React 中执行时如何禁用点击事件?