首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >此函数的IE 6-8修复

此函数的IE 6-8修复
EN

Stack Overflow用户
提问于 2015-10-15 02:19:44
回答 1查看 81关注 0票数 0

我正在开发一个小函数,它在所有浏览器中都工作得很好,然而,在IE6到8中,标签表现得很奇怪。例如,如果你点击Bold,你将拥有<b></b>,如果你第二次点击Bold,你将拥有<b></b><b><b></b></b><b></b>,而不是另一个<b></b>。不知道它为什么要这么做。

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

代码语言:javascript
运行
复制
$(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);
})
});
EN

回答 1

Stack Overflow用户

发布于 2015-10-28 06:03:11

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

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

但是请注意,我已经很久没有使用过这个库了(部分原因是它不是我需要编写的一个功能领域,但主要是因为我不需要支持IE6-8或更多)。

我在github的页面上看到它已经很多年没有更新了,并且声称与jQuery 1.0.2兼容,所以我怀疑它很有可能不会开箱即用。然而,它的代码很容易阅读,并展示了如何在旧的IE中进行文本选择,所以最坏的情况是,如果它不能工作,你至少可以抄袭它的技术。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33132772

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档