如何在shadow dom中获取一个可满足的div中的光标位置？
在shadow DOM中获取一个可满足的div中的光标位置，可以通过以下步骤实现：
- 首先，使用
querySelector方法选择要获取光标位置的div元素。例如，可以使用document.querySelector('div')选择第一个div元素。 - 接下来，使用
getSelection方法获取当前文档的选区对象。例如，可以使用window.getSelection()获取选区对象。 - 然后，使用选区对象的
getRangeAt方法获取当前选区的范围对象。例如，可以使用getSelection().getRangeAt(0)获取第一个范围对象。 - 使用范围对象的
startOffset属性获取光标在范围起始位置的偏移量。例如，可以使用getSelection().getRangeAt(0).startOffset获取光标的起始偏移量。 - 最后，将获取到的光标位置进行处理，以满足你的需求。
需要注意的是，以上方法适用于在shadow DOM中获取光标位置的一般情况。具体实现可能会因具体的应用场景和代码结构而有所不同。
关于shadow DOM的更多信息，你可以参考腾讯云的Web Components产品介绍页面：Web Components产品介绍。
相关·内容
1回答
我正在向一个站点添加一个JavaScript驱动的子窗口。基本上，部分UI位于屏幕左边缘之外，直到用户触发链接；然后移动到可见位置。我有一系列的五个，但还没有得到单独的名誉点来链接它们。
出于可访问性的目的，我想使用包含文档片段的链接，因此：
<a href="#quicklinks" id="quicklinks-trigger">Quick Links</a>
使用相应的JavaScript (使用jQuery)：
$("#quicklinks-trigger").click(function(e){
$("
浏览 0提问于2010-11-09得票数 2
回答已采纳
1回答
我正在编写一个内容可编辑的DIV自动完成程序(需要在文本框中呈现html内容)。因此，我更喜欢使用contenteditable而不是TEXTAREA)。现在，我需要在DIV中有keyup/keydown/click事件时找到光标位置。这样我就可以在该位置插入html/文本。我不知道如何通过计算找到它，或者有没有本机浏览器功能可以帮助我找到内容可编辑的DIV中的光标位置。
浏览 87提问于2010-02-06得票数 17
我正在阅读关于主机和可见性的，它描述了关于Component装饰器的viewProviders元数据属性的如下内容：
使用viewProviders，我们可以非常具体地告诉DI系统，哪些提供程序可以用于哪个子注入器(Light或Shadow )。
我想知道angular2在组件模板中如何区分Light或Shadow？
本文还提到了<ng-content>标记：
如果我们相应地配置角度，这个DOM树可以是阴影DOM。这也是为什么我们在那里有标签。它是内容插入点的角实现，这是另一个Shadow DOM特性。
所以ng-content里面的任何东西都被认为是Shadow
浏览 5提问于2017-01-16得票数 2
回答已采纳
最近，我使用ContentEditable开发了一个简单的编辑器。应用程序的要求很简单，只有一个例外，那就是能够插入不受正常编辑操作保护的文本块。
这些文本块不能编辑，必须以单个字符的形式运行，以便移动光标或删除它们。
生成HTML的示例如下所示：
<div id="editor" contenteditable style="height: 400px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto;">
"This is standard text
浏览 4提问于2017-03-30得票数 4
回答已采纳
5回答
我已经创建了一个小游戏，其中一些块在主div周围移动。同时保持div的鼠标(我已经将光标的位置分配给了该div)。
我只想跟踪光标div是否在块上移动(这些块也是div)。如果是这样，那么游戏就结束了。
如何检测块或光标div是否在彼此上方移动？
浏览 2提问于2009-03-04得票数 3
回答已采纳
我希望将光标包装在span标记中的可内容div中。
示例(由|表示的游标)：
在此之前：
The fox jumps |
之后：
The fox jumps <span>|</span>
任何修改innerHTML的尝试都会导致光标移动到行尾。我想把它插入到新的HTML的span之间。
浏览 5提问于2012-11-25得票数 2
回答已采纳
我正在尝试创建一个自定义的xml编辑器，并模仿eclipse中的基本xml编辑器提供的一些功能。我可以看到，在basic xml编辑器中，它在后台计算xpath以确定我的光标在xml文件中的位置，并从xsd中提取相应的数据并显示出来。我似乎找不到资源来使用我的自定义xml编辑器来完成这项工作。我需要根据光标所在的位置获取xml节点。我研究了DOM解析器和SAX解析器，但它们不能解决检索光标所在的xml节点的问题。我也研究过XPath内容辅助，但似乎无法弄清楚它是如何工作的。我发现了这个堆栈溢出链接，这个链接仍然没有得到很好的回答：这绝对是可以做到的。我可以使用哪些资源？
浏览 20提问于2017-06-30得票数 1
2回答
我已经写了一些代码来使文本发光，但是文本不仅当光标在文本上时发光，而且当光标在文本延伸的水平区域上时也会发光。为什么会发生这种情况?我如何才能使它仅在光标位于文本上时才会发光？
<!DOCTYPE html>
<html>
<head>
<title>tTEXT</title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<body>
<style&
浏览 1提问于2013-06-27得票数 0
回答已采纳
我正在尝试为ckeditor创建按钮，它将使用960.gs网格系统向编辑器添加内容的行和列。
我需要一种方法将生成的代码插入到编辑器窗口中已经存在的特定div中，而不仅仅是在光标处。
例如，我们在编辑器中有这样的代码：
<div class="container">
<div class="grid_12">
<div class="inner">
</div>
</div>
</div>
当我单击我的按钮时，会生成以下代码：
<div clas
浏览 0提问于2012-01-04得票数 2
回答已采纳
我需要找到光标的当前位置，以便将其存储在一个变量中。我看过几个这样的答案，没有一个是成功的。
到目前为止，我所拥有的：
function getCaretPos(id) {
var el = Ext.getCmp(id);
var rng, ii=-1;
var currSelection = window.getSelection();
if(currSelection){
currSelection.modify("character", el.value.length);
// get the curre
浏览 1提问于2016-12-14得票数 0
1回答
如何动态移动页面上的元素
、、、
这可能是一个非常基本的问题，但当用户单击按钮时，我正试图弄清楚如何移动div。在我的例子中，当用户单击按钮时，我希望页面底部有一个白色的栏向下移动。
const [movepos, setMovepos] = useState("0")
return (
<>
<div style={{
position: "absolute",
width: "100%",
height: "60px",
浏览 5提问于2022-07-16得票数 0
回答已采纳
1回答
我正在开发一个浏览器插件，它将一个小部件作为影子DOM插入到任何网站中，但由于某些原因，我无法使CSS :hover选择器和cursor属性工作。
下面是创建影子DOM的内容脚本片段：
var inpagePopupHTML = "";
var insertStylesHTML = "";
// load the widget HTML from a resource file (works fine)
$.get(browser.runtime.getURL("/ui/mistake-popup.html"), function(data)
浏览 15提问于2022-09-24得票数 0
回答已采纳
HTML代码片段：
<div contenteditable='true' id="txt">123<b>456</b>789</div>
<button onclick="get()">Click Me</button>
<span onclick="get()">Click Me</span>
<script>
function get(){
document.getElementById(&
浏览 7提问于2012-08-04得票数 7
$(document).ready() -它是如何执行的？在DOM创建后，光标是否会在该行中等待以执行代码，还是在浏览器创建DOM后，此方法将像事件处理程序一样执行？
如果没有下载图像，但在DOM构造之后执行$(document).ready()来读取该图像的src属性并将其赋值给其他局部变量，该怎么办？
浏览 2提问于2012-03-23得票数 3
回答已采纳
2回答
我想改变一些div标签中的光标速度，以便在我的网站中提供更好的用户体验。我已经更改了光标的图像，我想更改放慢光标的速度。有没有办法做到这一点？
浏览 0提问于2016-08-01得票数 0
我正在使用jquery mobile，并试图删除一些类，而不是编写一堆css。当我在jsFiddle中测试它时，它工作得很好，但当我在浏览器中查看它时，情况就不一样了。我已经将脚本放在data-role="page“中，所以它应该可以正确加载。我也尝试过.trigger("updatelayout")；但似乎不起作用。任何帮助都是非常感谢的，因为这应该是2分钟的任务变成2小时的头痛。
jquery：
$("#panelforminput div").removeClass("ui-shadow-inset ui-corner-all ui-btn
浏览 0提问于2013-04-27得票数 1
回答已采纳
更新的
我正在尝试将html div标记放在它的父div标记的底部。例如，我有div标记，并使用jquery创建另一个div标记，并尝试将其放在文档中已经可见的div标记的底部。我正在用下面的代码尝试这一点，但不起作用。它不会将div标记放在可用div标记的底部。
var self = $(this);
var sh = $('<div></div>');
var bgshadow = $(sh).css({
'position' : 'abs
浏览 8提问于2012-03-08得票数 1
1回答
我有一个悬停(鼠标中心)的实现，单击，mouseleave，它显示和隐藏弹出模式组件时，目标元素是悬停。
但是问题是弹出模态组件会在离悬停元素有点远的地方打开，这是由于我给出的top,left位置造成的。
如何正确定位这个模态组件，是否可以将弹出组件放置在鼠标光标的旁边，而不是弹出式组件位于悬停元素的一侧？
(当我悬停在元素上时，弹出组件的距离也会发生变化)。
也许CSS :after可以作为一个解决方案？
最小可重现性示例
用于处理弹出模式的打开和关闭的TS文件
modalShow = false;
modalleft;
modaltop;
addClickEvent(e,name) {
浏览 0提问于2019-09-03得票数 0
回答已采纳
1回答
最近，我已经到了一个死胡同，拖放在jQuery上。
我在div容器中有一些div元素，所有这些元素都使用顶部和左侧的css属性定位。其中一些元素必须保持隐藏(css显示:无)，当特定事件触发时，必须显示一些隐藏元素。到目前为止，我们是好的，因为即使元素是隐藏的，当它们被显示在正确的位置上，上面和左边，他们被给予。当一个先前隐藏的元素被拖动到其他位置时，问题就开始了；由于一些奇怪的原因，当拖动开始时，元素不是粘在光标的位置上，而是像光标下方的300 it和左边的200 it一样。为什么会发生这种情况，我如何解决这个问题？
浏览 1提问于2010-12-15得票数 2
触发change事件时，光标将移动到开头，而不是设置到最后一个类型位置。我使用的是angular js的内容可编辑的div。
柱塞
为什么光标位置移动到开始位置？
浏览 4提问于2014-06-13得票数 1
我正在制作一个Android应用程序。在我的应用程序中，我必须找到edittext的光标位置。例如，我将文本"how are you"放在edittext上。如果我点击character 'a'旁边的，我现在必须找到'a‘前面的光标。
如何找到光标位置和光标所在的字符？
浏览 0提问于2012-03-21得票数 8
回答已采纳
2回答
如果我创建一个div，在iframe内部具有可满足的true，如果双击它，它变成非functional.the焦点仍然在iframe中，您可以看到光标，但是它不响应按键。
有谁知道我该怎么克服这个问题吗？
编辑：
我已经实现了一个dojo编辑器。如果您在ipad中打开，您将看到上面描述的问题。
浏览 0提问于2013-05-18得票数 8
1回答
如何在阴影DOM上应用样式
、、、、
我试图在阴影DOM上应用一些样式。我有一个例子：
const existingElement = document.getElementById("foo");
const shadow = existingElement.attachShadow({ mode: "open" });
const message = document.createElement("p");
message.setAttribute("class", "text");
message.textContent = "He
浏览 5提问于2022-02-08得票数 1
回答已采纳
1回答
我正在尝试用CSS属性找到最简单的方法来垂直对齐我的类似iOS的切换按钮，以便看起来更漂亮。
我不想使用第二个div - container..我只想将div.switch-btn：：移到.switch-btn中间
<!DOCTYPE html>
<html>
<title>iOS Toogle Switch</title>
<style>
.switch{
opacity: 0;
}
.switch-btn{
width: 80px;
浏览 33提问于2018-07-16得票数 1
回答已采纳
2回答
在滚动溢出div中放置弹出窗口
、、、、
我一直试图在滚动div容器中使用最小的js来实现弹出。溢出卷轴是不可避免的。寻找一些帮助放置弹出式查找位置的父，与位置:固定。(这应该是绝对的)
下面是HTML代码，这段代码位于溢出:滚动容器中。
<span class="popover-wrapper right">
<a href="#" data-role="popover" data-target="detailpop">...</a>
<div class="popover-modal d
浏览 5提问于2017-05-23得票数 1
回答已采纳
什么是#影子根(用户代理)？如何从文本框中删除它？
详细
这是我的密码：
<input type="text" name="pincode" class="form-control frm_pincode" value="" />
但是当我检查它的时候我看到
<input type="text" name="pincode" class="form-control frm_pincode" value="">
#shadow-root (u
浏览 5提问于2014-09-17得票数 13
回答已采纳
我有一个使用jquery ui sortable的表应用于tbody。当我拖动tr时，我给了它一个移动光标。这很好用。
但是，客户端希望将光标悬停在该行上，以便他们知道它可以移动。我使用css将cursor:指针应用到tr。然后，在tr行上悬停时会给出一个点。
问题是，如果我拖放了可排序对象，我就不再获得移动光标。
你知道如何让游标同时移动和悬停可排序的行吗？
谢谢
格雷姆
浏览 2提问于2011-10-10得票数 0
回答已采纳
2回答
我正在建立一个内容管理系统，在那里我使用jQuery和CKEditor编辑内联内容。当编辑器模糊时，要求用户确认他/她想要放弃编辑。如果选择'no‘，模糊事件应被取消，编辑器保持焦点不改变光标位置。因为在我看来这是不可能的，所以我尝试在模糊完成后重新聚焦编辑器。下面的代码片段来自blur事件处理程序：
var $this = $(this);
if (confirm('Discard your changes?')) {
$this.html($this.data('previous'));
} else {
// Optimally p
浏览 0提问于2013-03-30得票数 2
回答已采纳
2回答
我有一组共享范围的指令。
更新：
在这里，代码可以作为一个plunk提供。
todo-项目：
app.directive("todoItem",function(DeleteTodo,$log){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/todo.html',
scope:{
todo:'=value'
},
controller:function($scope){},
replace:t
浏览 3提问于2015-04-27得票数 3
回答已采纳
我尝试在没有jQuery的情况下设置容器的高度。我想出了一个解决方案，只为first div设置height属性(在jsfiddle中甚至不能这样做)。请帮帮忙。
<div class="gallery">
<div id="setWidth" class="gallery-col box shadow">Lorem</div>
<div class="gallery-col box shadow">Lorem</div>
<div class="g
浏览 1提问于2017-10-13得票数 0
2回答
我试图用范围滑块旋转一个元素，但是每次我拖动该元素时，它都会在拖动时失去旋转的值，它还会改变框的位置，并将其放置在开始位置。我在stackblitz中创建了一个简单测试项目的链接，这样我就可以重新创建我的问题了。
有人能帮我解决这个问题吗？
我将代码放在这里，以防有人不能很好地运行到测试项目的链接：
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsMod
浏览 9提问于2021-02-23得票数 2
回答已采纳
如何在一个可满足的div中设置和获取插入符号的位置？
我感兴趣的是一种方法，当contenteditable div在一个webcomponent (带有shadow dom)中时，它也可以工作。
浏览 0提问于2015-11-23得票数 1
是否有任何方法知道当前光标在编辑控件中的位置？
我有一个场景，需要在当前光标位置插入文本。
注意：--我正在用C++实现逻辑。
浏览 2提问于2018-05-10得票数 1
2回答
有没有一种方法可以将光标位置设置为CKEditor中的已知索引？ 我之所以这样做，是因为当我在编辑器中更改html时，它会将光标重置到所插入元素的开头，这是一个问题，因为我在用户键入时正在动态地更改内容。 如果我知道我想在编辑器中将光标设置回一个已知的字符位置，比如100，这是可能的吗？ (我问了一个related question，但我认为我用示例代码使问题过于复杂了。)
浏览 0提问于2013-05-30得票数 17
回答已采纳
我正在使用Stencil.js库来构建web组件。库在Edge和IE11中加载了一个多边形，以便为它们提供浏览器支持，因为它们缺乏对web组件规范的本地支持。
在Chrome中，如果我使用本机DOM (appendChild、removeChild等)修改一个DOM，并且阴影Dom包含一个元素，Chrome重新解析扁平的DOM树，并且对轻型DOM的更新反映在槽中。
--这看起来可能是一个bug，或者是多边形填充中的一个限制。是否有人知道这是否属实，是否有任何解决办法？
样本代码：
// web component
@Component({
tag: "foo-compone
浏览 0提问于2019-06-26得票数 1
我有这样的代码：
<div class="fascia">
<div class="elements">
<h3 class="titolo"><a href="/link">Title</a></h3>
<div class="desc"><a href="/link">Desc</a></div>
</div>
浏览 0提问于2011-11-15得票数 1
回答已采纳
2回答
我正在尝试实现一个在React中自动插入闭括号的文本区域，但是每当我修改文本区域的value属性时，光标就会跳到正在编辑的文本的末尾。
下面是我的onChange函数：
//on change
function(event) {
var newText = event.target.value
var cursorPosition = getCursorPosition(event.target)
if(lastCharacterWasParen(newText, cursorPosition)){
浏览 4提问于2015-05-07得票数 5
我需要一个光标，可以在表格中的两个单元格之间移动。下面是jsFiddle：
如果单击该表，光标将在选择整个单元格、选择单元格底部和顶部之间循环。
如您所见，由于边框宽度的变化，当光标移动时，表会“跳转”。这太丑了。我怎么才能阻止这一切？
制约因素：
光标必须宽2像素(不是1而不是3)
纯CSS首选
不需要额外的HTML元素(我可以很容易地用一个带有1像素白色边框的div包装每个单元格，这样我就会变成黑色，但我正在寻找一种不向DOM添加垃圾的解决方案)。
CSS3很好
我可以接受IE10+ :-)
浏览 3提问于2013-01-02得票数 0
回答已采纳
1回答
嗨，我用下面的代码来显示带有图像缩略图的列表视图。
我需要在网格视图中显示相同的内容
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-w
浏览 2提问于2014-06-04得票数 0
我正在研制一个简单的文字处理机。它使用的是可满足的。我有一个单词列表，我想总是出现突出显示。
<article contenteditable="true" class="content">
<p>Once upon a time, there were a couple of paragraphs. Some things were <b>bold</b>, and other things were <i>italic.</i></p>
<p>Th
浏览 1提问于2014-07-10得票数 1
回答已采纳
2回答
我正在做一个网站，我想在上面显示一个googleMaps的搜索结果。我希望当光标在搜索结果上或光标在地图上时，可以滚动浏览这些搜索结果。我通过创建一个像这样的div结构很好地实现了这个功能：
<div class="map" id="parent" >
<div id="googleMap"></div>
<div id="mapContainer">
<div id="searchContainer">
<!-- se
浏览 0提问于2014-03-24得票数 2
我正在开发一个新的应用程序，我需要自定义EditText光标的颜色和光标的宽度。能不能请各位指导一下，me.It会很实用的。提前谢谢。
浏览 0提问于2015-05-22得票数 16
回答已采纳
我目前是HTML和CSS的新手，对它们知之甚少。最近，我遇到了一个问题，当<div>元素的背景颜色为深色时，我的文本光标不可见。
下面是一个示例：
<style>
.PreCode {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: initial;
color: rgb(28,26,26);
background-color: grey;
border: 1px solid
浏览 0提问于2021-10-24得票数 0
在上图中，在我要查找的PasswordBox.Now中，光标在三个文本值之后闪烁，这是光标当前闪烁的位置。
浏览 15提问于2012-08-28得票数 0
2回答
我试图在网格应用程序中实现查找功能。我可以使用SetGridCursor(self, row, col)移动光标，但我不知道如何将网格的“视图端口”移动到新的光标位置。换句话说，当光标被移动到用户正在寻找的单元格时，用户仍然必须手动滚动，直到找到游标单元格。
如何以编程方式滚动网格，以便将网格光标集中在视图端口中？
随机地，在写这个问题时，我访问了Grid wiki页面，搜索了“滚动”这个词，发现：
MakeCellVisible( int row, int col ) -强制特定单元格可见，有效地滚动给定单元格的网格。
这几乎解决了我的问题。我希望单元格以视窗为中心，但这个功能只滚
浏览 1提问于2013-01-10得票数 0
我有一个可满足的div，当您键入@时，列表就会出现。现在，当我在可内容div中当前光标位置单击li元素时，我希望能够插入一些文本。不知何故，我需要找到光标的位置，并将@替换为一些文本。假设我输入'Javascript is @‘来生成'Javascript是棒极了’。
$('.reply').on('keydown', function(e) {
if (e.keyCode == 86) {
$('.list').show();
} else {
$('.list').hide();
浏览 0提问于2019-06-27得票数 0
回答已采纳
我正在构建一个简单的可拖功能：
<div id="app">
<div id="i-plane">
<div
id="i-interact"
v-bind:style="position"
v-on:mousedown="handleDown"
v-on:mousemove="handleMove"
v-on:mouseout="handleUp">
</div&
浏览 0提问于2016-12-27得票数 2
回答已采纳
我试图扩展聚合物核心选择器，但它不呈现在网页上。当我将<shadow></shadow>放在template-tags中时，它确实会呈现。
我不确定这是不是真正的问题。影子标签的目的是什么？我在API文档中找不到这方面的信息。
下面是指向一个示例的链接：
浏览 3提问于2014-07-25得票数 0
回答已采纳
1回答
在我的项目中，我有一个<div>，它通过jquery函数接收从几个页面读取的内容，并将它们显示为弹出窗口：
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
与此相关的css
浏览 2提问于2014-03-26得票数 0
哪些步骤将重现问题：
(1)在chrome浏览器中运行下面的代码
(2)双击“有影子”和“无阴影”两部分中的“第二”字。
预期结果:应选择“第二”一词(因为该词在第2节中起作用)。
实际行为:双击不选择文本。
var arr = document.querySelectorAll('#some-run');
var spans = Array.from(arr);
spans.forEach(function(span) {
var shadow = span.createShadowRoot();
var template = document.querySele
浏览 6提问于2017-11-28得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
