IE 6-8 修复此功能答案

【问题标题】：IE 6-8 fix for this functionIE 6-8 修复此功能
【发布时间】：2016-01-12 23:32:25
【问题描述】：

我正在开发一个小功能，它在所有浏览器中都可以正常工作，但是，在 IE6 到 8 中，标签的行为很有趣。例如，如果您单击粗体，您将拥有，然后如果您第二次单击粗体，而不是另一个，您将拥有。不知道为什么会这样。

小提琴：http://jsfiddle.net/T2Q89/26/

$(document).ready(function() {
$('#btnedit-bold').on("click",function(e) {
    wrapText('b');
});

$('#btnedit-italic').on("click",function(e) {
    wrapText('i');
});

$('#btnedit-underline').on("click",function(e) {
    wrapText('u');
});

$('#btnedit-delete').on("click",function(e) {
    wrapText('del');
});

$('#btnedit-link').on("click",function(e) {
    var textArea = $('.area'),
        len = textArea.val().length,
        start = textArea[0].selectionStart,
        end = textArea[0].selectionEnd,
        selectedText = textArea.val().substring(start, end);
    $('#btnedit-title').val(selectedText);
    $('#btnedit-url').val('http://');
    $('#prompt').show();
});

$('#btnedit-ok').on("click",function(e) {
    e.preventDefault();
    $('#prompt').hide();
    replacement = '<a title="'+$('#btnedit-title').val()+'" href="'+$('#btnedit-url').val()+'" rel="external">' + $('#btnedit-title').val() + '</a>';
    wrapLink(replacement);
}); 

$('#btnedit-cancel').on("click",function(e) {
    e.preventDefault();
    $('#prompt').hide();
}); 
});

function wrapLink(link) {
var textArea = $('.area'),
    len = textArea.val().length,
    start = textArea[0].selectionStart,
    end = textArea[0].selectionEnd,
    selectedText = textArea.val().substring(start, end);
textArea.val(textArea.val().substring(0, start) + link + textArea.val().substring(end, len));
$('.area').keyup();
}


function wrapText(tag) {
var textArea = $('.area'),
    len = textArea.val().length,
    start = textArea[0].selectionStart,
    end = textArea[0].selectionEnd,
    selectedText = textArea.val().substring(start, end),
    replacement = '<' + tag + '>' + selectedText + '</' + tag + '>';
textArea.val(textArea.val().substring(0, start) + replacement +   textArea.val().substring(end, len));
$('.area').keyup();
}

$(function() {  
$('.area').keyup(function(){                    
    var value = $(this).val();
    var contentAttr = $(this).attr( 'name' );
    $( '.' + contentAttr + '' ).html(value);
})
});

【问题讨论】：

在 markdown 中，` char 适合引用 html。
这是导致问题的原因吗？不知道你的意思。
没有。在您的问题的正文中，您编写了一些 html 标签......但是，除非您用 ` 引号将它们括起来，否则它们不会在最终输出中呈现，因为如果它们没有被列入白名单，它们将被剥离或呈现作为文档中的 HTML... 例如您的 标签在您问题的初始修订版中不可见。
哦，对不起，是的，代码不知何故被删掉了。我现在确实把整个 jquery 代码放进去了。
说真的......我什至无法在 IE8 中查看您的小提琴，因为 jsfiddle 不支持 IE8。在这一点上，没有人应该支持 IE8。截至 1 月 12 日。微软甚至不会支持 IE8，更不用说 IE6 和 7。如果您的应用在 IE9-11 中运行，那么您算幸运并继续前进。

标签： jquery internet-explorer-8 internet-explorer-6

【解决方案1】：

这里的基本问题是旧的IE版本不能正确支持.selectionStart和.selectionEnd属性。

所以你需要做一些替代的事情。由于您已经在使用 jQuery，我的第一个建议是尝试 jQuery FieldSelection library。

但是请注意，我在 ages 中没有使用过这个库（部分是因为它不是我需要在一段时间内编写的功能领域，但主要是因为我没有支持 IE6-8 及更高版本）。

我在 github 页面上看到它已经多年没有更新并声称与 jQuery 1.0.2 兼容，所以我怀疑它很有可能无法开箱即用。但是它的代码很容易阅读，并且确实展示了如何在旧 IE 中进行文本选择，所以如果它不起作用，你至少可以借鉴它的技术。

【讨论】：