IE11中textarea onClick事件上的光标位置/索引答案

【问题标题】：Cursor position/index on textarea onClick event in IE11IE11中textarea onClick事件上的光标位置/索引
【发布时间】：2015-01-20 09:02:51
【问题描述】：

场景：用户在文本区域上进行 onClick（在内容之间的某处，无需选择任何字符，只需单击一下）。使用javascript需要找到光标的位置。我们有以下脚本：

comp.focus();
var range = document.selection.createRange();
range.text='|';
var oldval = comp.value;
var pos= oldval.index('|');

代码在 IE

comp.focus();
var range = document.getSelection().createRange();

在 ver11 中，“document.getSelection().createRange()”显示错误：对象不支持属性或方法“createRange()”。然后尝试获取 'var sel = document.getSelection()' 的对象。当我尝试打印为警报“sel”时，它说“无法在 undefiend 或空引用上获取属性 toString” 1. 使用旧版本 document.selection.createRange 运行良好，即使没有任何字符被选中/突出显示。但是对于 IE11，它不是这样的。 2.如果没有任何选定的字符，请告诉我如何创建Range evne。需要解决方案/建议才能继续......

【问题讨论】：

您应该使用属性selectionDirection、selectionStart 和selectionEnd。属性selectionDirection 将有一个字符串表示'forward' 或'backward'。其他 2 个定义选择开始和结束的位置。如果没有选择文本，它们将具有相同的值。要获得选择，您可以使用textarea.value.substr() 之类的方法。
我的逻辑，没有选择任何内容，只需点击一下。在 tat 位置插入一个占位符并在文本框值中找到 tat 占位符索引以获取光标位置。 (1) 'selectionstart and end' 它会产生什么值，意味着在没有选择文本的情况下，tat 值 wud 是光标索引值吗？ (2) 所以没有选择的内容不能得到范围值？
情况不同。但它的工作原理是这样的：如果您有光标 anywhere 但未选择任何内容，您将获得光标位置（例如：第 6 个字符）。否则，selectionEnd 将具有光标当前所在的值（例如：第 0 个字符或第 150 个字符）。 selectionStart 是选择开始的地方。如果selectionEnd 高于selectionStart，selectionDirection 将为'forward'，否则为'backward'。有时，仅特定于<textarea>，它可能具有'none' 的值，您可以不知道。
我知道我是个糟糕的老师，而且我不擅长解释。从浏览器运行var input=document.getElementById('search').getElementsByTagName('input')[0]; alert(['Direction:',input.selectionDirection,'\r\n','Start:',input.selectionStart,'\r\n','End:',input.selectionEnd].join(''));（使用控制台，在浏览器的元素检查器中）。它只会在这里专门工作，而在其他任何地方都不起作用。这将显示多个值会发生什么。它将使用搜索框来显示值的行为。

标签： javascript jquery

【解决方案1】：

我使用这个函数来获取光标位置：

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

以下代码返回光标位置：

comp.getCursorPosition();

在 IE11 上运行良好

【讨论】：