相关疑难解决方法(0)

我找到了很多关于如何在contentEditable DIV中设置光标或插入位置的好的,交叉浏览器的答案,但是没有关于如何获取或找到它的位置......

我想要做的是在关键字中知道该div中插入符号的位置.

因此,当用户输入文本时,我可以随时知道其光标在div中的位置.

编辑:我在div内容(文本)中寻找INDEX,而不是光标坐标.

<div id="contentBox" contentEditable="true"></div>

$('#contentbox').keyup(function() { 
    // ... ? 
});

我有contentEditable元素(可以是p,div,...),我想在其中得到插入符号(光标).我通常可以用这段代码实现它:

var position = window.getSelection().getRangeAt(0).startOffset;

这个工作正常,而元素只包含文本.但是当元素包含一些HTML格式时,返回的位置相对于包含的HTML元素中的插入位置.

我们假设contentEditable元素的内容是这样的:

AB<b>CD</b>EF

如果插入符号在内部<b></b>,让我们说在C和D之间,上面代码的返回位置是1而不是3(从contentEditable元素的内容开始算起)

任何人都可以提出解决方案吗？

如何在输入中获取文本插入符号的索引？

这有什么问题？

if ( window.getSelection() ) 
  EditField = window.getSelection().getRangeAt(0);

抛出错误:

未捕获的IndexSizeError:无法在"选择"上执行"getRangeAt":0不是有效索引.

我有一个令人满意的div,我希望能够让用户插入链接,图像或YouTube视频等内容.目前这就是我所拥有的:

function addLink() {
  var link = $('#url').val();
  $('#editor').focus();
  document.execCommand('createLink', false, link);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Text Editor -->
<div id="editor" contenteditable="true"></div>

<!-- Add Link -->
<input type="text" id="url">
<button onclick="addLink()">Submit</button>

如您所见,用户必须输入单独的文本框才能输入链接地址.因此,当链接添加到编辑器时,它不会添加到指针/插入符所在的位置.

我的问题是如何获取和设置指针/插入符的位置.我已经看到了其他问题,例如设置指针,但是我希望有一个在所有现代浏览器中都支持的解决方案,包括Chrome,Safari,Firefox和IE9 +.

有任何想法吗？谢谢.

编辑:

我发现下面的代码获取位置,但它只根据它所在的行获取位置.例如,如果我有这个(|光标在哪里):

This is some text
And som|e more text

然后我将返回值7,而不是24.

function getPosition() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            return sel.getRangeAt(0).startOffset;
        }
    }
    return null;
}

我正在构建一个Sql查询构建器,并希望在用户键入SELECT,FROM,WHERE等单词时更改textarea中单词的文本颜色.

我已经搜索了一下这个(https://jsfiddle.net/qcykvr8j/2/)我很遗憾没有进一步.

示例代码

HTML:

<textarea name="query_field_one" id="query_field_one" onkeyup="checkName(this)"></textarea>

JS:

    function checkName(el)
    {
    if (el.value == "SELECT" || 
    el.value == "FROM" || 
    el.value == "WHERE" || 
    el.value == "LIKE" || 
    el.value == "BETWEEN" || 
    el.value == "NOT LIKE" || 
    el.value == "FALSE" || 
    el.value == "NULL" || 
    el.value == "TRUE" || 
    el.value == "NOT IN")
    {
      el.style.color='orange'

    }
    else {
      el.style.color='#FFF'

    }
  }

的jsfiddle:

https://jsfiddle.net/qcykvr8j/2/

但是这个例子在我进一步输入时会删除颜色.

我想要的是这个:

我已经尝试过将Keyup与jQuery中的Contains结合使用,但这并没有带来太多结果.

密钥:https://api.jquery.com/keyup/

包含:https://api.jquery.com/contains-selector/

我希望有人可以帮助我找到一些我可以找到更多信息的例子.

此致,Jens

我想从RichTextArea获取光标位置或位置.我不知道如何获取当前光标位置没有任何鼠标事件.例如,TextArea有方法getCursorPos(),但RichTextArea没有像TextArea这样的方法.任何人都有任何想法？请帮我...

提前致谢...

在 Summernote 中切换到代码视图时，光标总是一直移动到文档末尾。有没有办法在切换时保持光标位置？有时使用它的人想要编写一些自定义 HTML，因为它比使用编辑器的按钮更快，但是在切换到代码视图后，他们必须向上滚动并尝试找到他们之前所在的位置。这不是很实用。

这是一个简单的堆栈闪电战。

基本上，我需要实现的是：当光标在这里时

我想单击“代码视图”按钮并转到此处：

当我点击鼠标时,我试图从该位置的内容可编辑div中提取单个单词.例如:

Lorem ipsum dolor sit amet, cons|ectetur adipiscing elit. Cras vestibulum gravida
tincidunt. Proin justo dolor, iaculis vulputate eleifend et, facilisis eu erat.*

使用| 代表插入符号,函数应返回" consectetur ".

我的尝试:

window.onload = function () {
        document.getElementById("text-editor").onclick = function () {
            var caretPos = 0, containerEl = null, sel, range;
            if (window.getSelection) {
                sel = window.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    if (range.commonAncestorContainer.parentNode == this) {
                        caretPos = range.endOffset;
                    }
                }
            } else if (document.selection && document.selection.createRange) {
                range = document.selection.createRange(); …

我有一堆垂直排列的多行可信div,我想通过箭头键在它们之间进行自然导航(就好像它是一个文档).为此,在keydown活动中我需要:

• 知道当前的插入符号行数和行数以确定是否需要向上移动(按下第一行和↑键)或向下(最后一行和↓键)
• 知道当前字符(显示的字符串中的位置)以确定是否需要向上移动(位置== 0和←键按下)或向下(位置== text.length和→按下)
• 当键被保持和未被释放时,该过程不应在开关元件之间停止(因此keydown事件,不是keyup)
• 优选:事件应该停止传播(例如,如果我在最后一行的第一列,我按↓键,它不应该跳到该行的最后一个字符,然后下去)
• 最好(真的很棒):在我们跳到下一个元素之后,我们不仅仅是.focus()元素,而是模仿与我们之前相同的垂直位置的点击,这样它会感觉自然,就像在文本编辑器中一样.

我迄今发现的所有脚本/库都没有完成我需要的所有东西或错误.请在您的建议中包含演示,以便我可以先测试而不在我的代码中进行测试.谢谢!

更新:视觉解释 - 请注意,有两个以上的div,最后一行的'向下箭头键'只是四个触发器中的一个