Question

我正在开发一个小函数，它在所有浏览器中都能正常工作，但是，在IE6到8中，标签很有趣。例如，如果你点击Bold，你将有，然后如果你第二次点击Bold，而不是另一个，你将拥有。不知道为什么会这样做。

小提琴：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);
})
});

Answer 1

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

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

但请注意，我没有在年龄中使用此库（部分原因是因为它不是我需要在一段时间内编写的功能区域，但主要是因为我没有支持IE6-8及更多）。

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

IE 6-8修复此功能

1 个答案: