Question

我使用MooTools Javascript库。这个库在这里提供了几个非常有用的功能：http://mootools.net/docs/more/Element/Element.Forms

问题是这个函数只适用于textarea等“form”元素。

现在我正在制作一个在线编辑器，对于编辑器，我自己使用div元素和内容可编辑功能。

当我想在mootools（更多）库中使用getCaretPosition等函数时，会调用此行：

var range = this.getDocument().selection.createRange();

但是我得到了这个错误：

this.getDocument().selection is undefined

似乎只有表单元素具有此选择对象（在此文档上：S？）。

有没有办法将表单功能添加到div（或所有）元素？

Answer 1

我担心它不会那么容易起作用。看一下源代码

例如，setSelectionRange有两个断言，1：它有type == "text"（因此，输入）或2：它有一个可以读取的.value属性。如果你将它应用于缺少任何一个的元素，它将无法工作。

你可以在其他地方寻找想法 - 比如这个david walsh文档选择片段可能很有用：

http://davidwalsh.name/text-select-widget

他只是在做：

var getSelection = function() {
    return $try(
        function() { return window.getSelection(); },
        function() { return document.getSelection(); },
        function() {
            var selection = document.selection && document.selection.createRange();
            if(selection.text) { return selection.text; }
            return false;
        }
    ) || false;
};

祝你好运 - 这是一个非常基本的例子，我把它放在一起，它提供了选择和可能的插入符号位置（根据选择的最后一个字符）作为父元素的偏移量 - {{ 3}}

Answer 2

我在名为CodeMirror（http://marijn.haverbeke.nl/codemirror/的Javascript项目中找到了此功能，也在jsfiddle中使用）。伟大的项目！

将表单元素功能添加到contenteditable div

2 个答案: