- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的代码:
addEmoji = () => {
document.getElementById('description-text').focus();
let element = $("#span").clone()[0];
let sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
let range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(element);
let textNode = document.createTextNode('\u00A0');
range.setStartAfter(element);
range.insertNode(textNode);
range.setStartAfter(textNode);
range.collapse(true);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<div id="description-text" ref="description" suppressContentEditableWarning="true" contentEditable={true} />
<div>
<button type="submit">Guardar Cambios</button>
</div>
</form>
<div>
{this.state.emojiPanel ?
<div>
<button type="button" onClick={this.switchEmojiPanel}>Hide Emojis</button>
<Picker onClick={this.addEmoji} set='emojione' emojiSize={26} title="Select Emoji" color="#000" />
<span id="span">INSERT</span>
</div>
:
<div>
<button type="button" onClick={this.switchEmojiPanel}>Select Emojis</button>
</div>
}
</div>
</div>
)
}
问题是,当用户单击表情符号时尝试在 div 中插入 span 时,window.getSelection() 不会获取我在 div 中位置的值,因为我正在从另一个组件调用该函数,这是 Picker,则 span 总是插入到 div 的开头。
如果有人能帮我解决这个问题,我将不胜感激!!
最佳答案
您可以使用 css user-select
属性来实现这一点。使用 user-select: none;
属性为您在 Picker 组件内单击的元素设置样式。
这样,当用户点击 Picker 组件内的表情符号时,插入符号位置或文本选择将保留在您在 contentEditable div 中离开的位置。
请务必检查兼容性以使其在不同浏览器中正常工作: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
关于javascript - window.getSelection() 与 emoji-mart(选择器组件)的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53001701/
您能回答一下这个问题吗? how do I get co-ordinates of selected text in an html using javascript document.getSele
var F1 = document.getElementById('samuText').value; function insertAtCursor() { if (window.getSelec
我尝试复制window.getSelection()至someObject将其存储为对象属性以供将来重用。 我有这个代码: var selection = window.getSelection();
这是我的代码: var sb = new qx.ui.form.SelectBox(); sb.add( new qx.ui.form.ListItem("English") ); sb.add( n
我正在使用新的 Firepad realtime text collaboration service . 我想对用户选择的框中的文本使用 JavaScript getSelection 方法。 但是
我正在尝试使用 document.getSelection 来选择我在所见即所得编辑器的文本区域中输入的文本。不过,它仅在您选择文本区域外的文本时才有效。不知道有没有办法让它在文本区域内选择文本? 下
我想在 iframe 设计模式中获取选定的内容。我正在使用以下代码。 function getIframeSelectionText(iframe) { var win = iframe.co
我需要建立一个评论机制,用户可以在其中突出显示一段文本,单击“对此发表评论”,然后执行某些操作。 Javascript 代码必须不仅要知道所选文本(这很简单),还要知道 anchorOffset,才能
我试图存储 window.getSelection() 的值,但如果用户选择另一个选择,这个值似乎会改变。 在我下面的代码中,我存储了初始用户的选择。然后我创建我的表单(这需要一些时间),当表单创建完
在firefox和chrome中window.getSelection用于获取document中的当前选择,但是如果当前选择在textarea中,window.getSelection返回的不是选择,
我有一个丰富的编辑器,我正在将其重写为 lit-element 自定义元素。我正在使用 Firefox(最新)进行测试。我正在尝试在自定义元素的 shadowDom 中选择内容可编辑元素(在方法中)。
在 Java 项目中,我使用 swt 小部件按钮作为复选框。 I have read the java docs我需要检查该框是否被选中的函数似乎是 Button.getSelection()。在我的
我正在尝试手动选择文本。 window.getSelection().getRangeAt(0); 行用于窗口选择的文本。但我希望这个由我预先选择。 foo=function() {
我正在使用带有 contenteditable 的 div 来制作文本编辑器。我觉得我在第一个障碍中失败了。 var bold = document.getElementById("bol
我一整天都在搜索 SO 和各种网站,发现了很多可能正好适合我的问题的答案,但我在实现解决方案时遇到了麻烦。快速概述我要实现的目标: 我构建了一个富文本编辑器。 我需要正确处理附加了格式的“粘贴”数据。
drawBarChart = function (data) { //few statements goes here which sets options which are being passe
我一直对为什么这种行为发生在 safari 上感到困惑。当我输入一些文本时,我试图获得选择,为此我使用了 window.getSelection() 并且它在 Firefox、Chrome、Opera
我在现有表格的mootools 1.3中制作了一个HtmlTable.Select,尝试了“selectable: true”和“enableSelect”,没有任何效果,如果我尝试访问表格的“get
下面是我的html代码: This is some short text. 当我使用鼠标并从“is”到“short”进行选择时,使用下面在网上找到的函数, function getSelectionC
在 JavaScript 中,我不知道如何通过单击使用 window.getSelection()? var s = window.getSelection(); s = s.toString().t
我是一名优秀的程序员,十分优秀!