相关疑难解决方法(0)

如何在用户文本选择旁边放置元素?

我需要在用户选择的文本旁边放置一个绝对定位按钮.就像IE8在内部做的那样.

我正在将一个jQuery mouseup事件绑定到Document,并获取所选文本,但我目前没有关于如何知道实际选择位置的想法,而没有将其包装在某个元素中,因为选择文本可以是跨越几个元素,如果我将其包裹起来会使结构混乱.

javascript dom

24
推荐指数
2
解决办法
2万
查看次数

使用Javascript更改所选文本的CSS

我正在尝试制作一个javascript书签,它将充当荧光笔,在按下书签时将网页上所选文本的背景更改为黄色.

我正在使用以下代码来获取所选文本,并且它工作正常,返回正确的字符串

function getSelText() {
var SelText = '';
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
return SelText;
Run Code Online (Sandbox Code Playgroud)

}

但是,当我创建一个类似的函数来使用jQuery更改所选文本的CSS时,它不起作用:

function highlightSelText() {
var SelText;
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
$(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
Run Code Online (Sandbox Code Playgroud)

}

有任何想法吗?

javascript css jquery bookmarklet highlighting

11
推荐指数
2
解决办法
1万
查看次数

如何删除ContentEditable中的H1格式(wysiwyg)

除了使用Undo之外,我认为没有办法删除内容可编辑的h1和h2标签.预期的行为是再次单击H1按钮应该关闭它,但它不会.还有一个"删除格式"按钮,但它只适用于粗体,斜体等项目.有没有办法通过JavaScript执行此操作?

编辑:结果必须删除打开和关闭H1标记,而不是用其他任何内容替换它.

请在此处查看简化的测试用例:http: //jsfiddle.net/kthornbloom/GSnbb/1/

<div id="editor" contenteditable="true">
    <h1>This is a heading one</h1>
    How can I remove the header styling if I want to?
</div>
Run Code Online (Sandbox Code Playgroud)

javascript html5 contenteditable

5
推荐指数
1
解决办法
1841
查看次数

Google Chrome 扩展中的 getSelection.getRangeAt(0)

我正在尝试确定浏览器中所选文本的位置。我需要在所选文本上方显示工具提示的位置。我想如果我得到了边界,我就能够计算出中间的值。\n我四处摆弄并在这里寻找建议,但找不到解决方案。

\n\n

如果我没记错的话,这似乎是与 Google Chrome 相关的问题?

\n\n
\n

请注意,我正在尝试创建一个 chrome 扩展,因此无需测试它是否适用于 Firefox / IE ...

\n
\n\n

这是导致问题的所有代码:

\n\n
var selection = window.getSelection();\n\n// calculate the posiition of the selection\nvar oRange = selection.getRangeAt(0);\nvar oRect = oRange.getBoundingClientRect();\nconsole.log(oRect);\n
Run Code Online (Sandbox Code Playgroud)\n\n

(我试图在这里参考这个例子)

\n\n

错误是这样的:

\n\n
\n

background.js:20 Uncaught DOMException: 无法在“Selection”上执行“getRangeAt”:0 不是有效索引。

\n
\n\n

如果这可以用 实现jQuery,我也不介意使用它,我不限于本机 JavaScript。

\n\n

我的background.js的完整代码

\n\n
chrome.contextMenus.create({\n    "title": "\xc3\x9cbersetzen",\n    "contexts": ["selection"],\n    "onclick" : clickHandler\n});\n\nfunction clickHandler(e) {\n\n    var translateUrl = "https://glosbe.com/gapi/translate?from=eng&dest=deu&format=json&phrase=" + encodeURI(e.selectionText.toLowerCase()) + "&pretty=true";\n    $.getJSON(translateUrl, callback);\n    // console.log(data.responseTex);\n}\n\nfunction …
Run Code Online (Sandbox Code Playgroud)

javascript jquery google-chrome

5
推荐指数
1
解决办法
1970
查看次数