IE 11中的文本区域选择在最后一行上无法正常工作

海梅·斯蒂尔(Jaime Still)

我正在构建一个Angular指令,该指令由用于编写Markdown的文本区域和用于在文本区域中插入格式的按钮组成。单击时,如果当前未选择任何文本,则按钮(例如,粗体)应附加以下内容:

**replace text**

其中替换文本被选中。

它在每种方案中都是在每种情况下保存以下内容:在IE 11中,当在最终行上发生选择时,但不是第一行。可以在所有其他浏览器中正常运行,并且在IE 11中可以很好地工作(减去此情况)。

这是指令中用于执行选择的代码:

var editor = element.find('textarea')[0];

function createWrappingMarkdown(symbol) {

    // If text is selected, wrap that text in the provided symbol
    // After doing so, set the cursor at the end of the highlight, 
    // but before the ending symbol(s)

    /* This section works fine */

    if (editor.selectionStart < editor.selectionEnd) {
        var start = editor.selectionStart,
            end = editor.selectionEnd;

        var value = editor.value.substring(0, start) + symbol +
            editor.value.substring(start, end) + symbol +
            editor.value.substring(end, editor.value.length);

        scope.$evalAsync(function () {
            editor.value = value;
            editor.focus();
            editor.selectionStart = end + symbol.length;
            editor.selectionEnd = end + symbol.length;
        });

    // If no text is highlighted, insert {symbol}replace text{symbol} 
    // at the current cursor position.
    // After inserting, select the text "replace text"

    /* This is where the selection is broken in IE 11 */

    } else if (editor.selectionStart || editor.selectionStart === 0) {
        var start = editor.selectionStart,
            message = "replace text";

        var value = editor.value.substring(0, start) + symbol +
            message + symbol + editor.value.substring(start, editor.value.length);

        scope.$evalAsync(function () {
            editor.value = value;
            setCursorSelect(start + symbol.length, start + symbol.length + message.length);
        });
    }
}

function setCursorSelect(start, end) {
    editor.focus();
    if (editor.setSelectionRange) {
        editor.setSelectionRange(start, end);
    } else {
        editor.selectionStart = start;
        editor.selectionEnd = end;
    }
}

更新

请参阅答案以解决此问题。Plunk进行了修改,以演示此修复程序。

海梅·斯蒂尔(Jaime Still)

在IE中进一步调试之后,我发现该editor.selectionStart值被设置为高于editor.value.length光标位于textarea中最后一个可用位置时的值。这仅在IE中发生,而在其他浏览器中则没有。考虑到这一点,只要在按下按钮后需要进行选择,我就能提出以下解决方案:

scope.$evalAsync(function () {
    if (editor.value.length < editor.selectionStart) {
        start = editor.value.length;
    }

    editor.value = value;
    setCursorSelect(start + symbol.length, start + symbol.length + message.length);
});

上面的代码已更新,以反映此修复程序。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

锚标签内的文本区域 IE 11 问题

来自分类Dev

Owlcarousel 在 IE Mobile 11 上无法正常工作

来自分类Dev

IE 11 disable =“ True”无法正常工作

来自分类Dev

jQuery隐藏选择器在IE 11中无法正常工作

来自分类Dev

菜单CSS在IE11中无法正常工作

来自分类Dev

IE11中的dataTransfer无法正常工作

来自分类Dev

IE11中的Owl Carousel无法正常工作

来自分类Dev

在CSS中定位IE 11无法正常工作

来自分类Dev

光标在IE11选择输入中无法正常运行

来自分类Dev

SVG文本路径在IE中无法正常工作

来自分类Dev

SVG文本路径在IE中无法正常工作

来自分类Dev

远程验证在IE上无法正常工作?

来自分类Dev

内联表在 IE 上无法正常工作

来自分类Dev

IE8上的角度显示,选择元素中的显示数据无法正常工作

来自分类Dev

IE8上的角度显示,选择元素中的显示数据无法正常工作

来自分类Dev

为什么对于IE9,IE10和IE11上的固定元素,translateX无法正常工作?

来自分类Dev

JSF selectCheckBoxMenu在IE中无法正常工作

来自分类Dev

execCommand在IE中无法正常工作

来自分类Dev

SVG进入IE11中的下一行

来自分类Dev

在 IE11 中,flexbox div 不尊重容器,文本在一行中溢出,而不是换行

来自分类Dev

在IE 11上的beforeunload-不提示用户无法正常工作

来自分类Dev

更改Font-awesome类在IE11上无法正常工作

来自分类Dev

焦点突出后,IE跳至文本区域的开始

来自分类Dev

淡入和淡出效果在IE8上无法正常工作以使文本闪烁?

来自分类Dev

输入按钮上的IE9 CSS无法正常工作

来自分类Dev

jQuery代码在Firefox / IE上无法正常工作

来自分类Dev

在IE8上无法正常工作的jQuery

来自分类Dev

菜单在IE8上无法正常工作

来自分类Dev

在IE中进行转换无法正常工作

Related 相关文章

  1. 1

    锚标签内的文本区域 IE 11 问题

  2. 2

    Owlcarousel 在 IE Mobile 11 上无法正常工作

  3. 3

    IE 11 disable =“ True”无法正常工作

  4. 4

    jQuery隐藏选择器在IE 11中无法正常工作

  5. 5

    菜单CSS在IE11中无法正常工作

  6. 6

    IE11中的dataTransfer无法正常工作

  7. 7

    IE11中的Owl Carousel无法正常工作

  8. 8

    在CSS中定位IE 11无法正常工作

  9. 9

    光标在IE11选择输入中无法正常运行

  10. 10

    SVG文本路径在IE中无法正常工作

  11. 11

    SVG文本路径在IE中无法正常工作

  12. 12

    远程验证在IE上无法正常工作?

  13. 13

    内联表在 IE 上无法正常工作

  14. 14

    IE8上的角度显示,选择元素中的显示数据无法正常工作

  15. 15

    IE8上的角度显示,选择元素中的显示数据无法正常工作

  16. 16

    为什么对于IE9,IE10和IE11上的固定元素,translateX无法正常工作?

  17. 17

    JSF selectCheckBoxMenu在IE中无法正常工作

  18. 18

    execCommand在IE中无法正常工作

  19. 19

    SVG进入IE11中的下一行

  20. 20

    在 IE11 中,flexbox div 不尊重容器,文本在一行中溢出,而不是换行

  21. 21

    在IE 11上的beforeunload-不提示用户无法正常工作

  22. 22

    更改Font-awesome类在IE11上无法正常工作

  23. 23

    焦点突出后,IE跳至文本区域的开始

  24. 24

    淡入和淡出效果在IE8上无法正常工作以使文本闪烁?

  25. 25

    输入按钮上的IE9 CSS无法正常工作

  26. 26

    jQuery代码在Firefox / IE上无法正常工作

  27. 27

    在IE8上无法正常工作的jQuery

  28. 28

    菜单在IE8上无法正常工作

  29. 29

    在IE中进行转换无法正常工作

热门标签

归档