IE 6-8修復此功能

Question

我正在開發一個小的函數，它在所有瀏覽器中都可以正常工作，但是，在IE6至8中，這些標記的作用很有趣。 例如，如果你大膽點擊你將有<b></b>然后如果你點擊，而不必對大膽的第二次，另一個<b></b>你有<b></b><b><b></b></b><b></b> 。 不知道為什么要這么做。

小提琴： 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庫 。

但是請注意，我沒有用在年齡這個庫（部分原因是因為它不是功能性的同時，以寫我需要的領域，但主要是因為我沒有支持IE6-8及以上）。

我在github頁面上看到它已經多年沒有更新，並聲稱與jQuery 1.0.2兼容，所以我懷疑它很有可能無法立即使用。 但是，它的代碼很容易閱讀，並且確實顯示了在舊IE中如何進行文本選擇，因此在最壞的情況下，如果它不起作用，您至少可以從中獲得技術。