Webkit,IE取消选择文本
问题描述:
我正在制作一个contentEditable jQuery插件。我创建了一个'工具'栏来对文本执行操作,例如使用execCommand将文本变为粗体,斜体等。问题在于,当您选择文本并单击其中一个按钮(包含onclick事件的div)时,它会取消选择您选择的文本(所有浏览器)。为了解决这个问题,我使用了:Webkit,IE取消选择文本
toolBar.onmousedown=function(){return false};
它在Firefox和Opera中运行良好。我试图使用
toolBar.onselectstart = function(){return false};
它可以防止IE中的文本选择。但是,webkit或IE都不起作用。我之前看到过使用输入按钮完成此操作,但我宁愿使用div。有任何想法吗?
答
我通过重新选择文本解决了这个问题。
在鼠标松开我捕捉选择信息:
$.getSelection = function() {
// ie has its own way of doing things from here on.
if($.browser.msie) return document.selection.createRange();
if (window.getSelection) {
var selection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
var selection = document.selection.createRange();
}
if (selection.getRangeAt)
var range = selection.getRangeAt(0);
else { // Safari!
var range = document.createRange();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
}
if (!range.toString().match(/[^\t\r\n ]/)) return false;
var ret = {};
// start end length text
ret.startContainer = range.startContainer;
ret.start = range.startOffset;
ret.endContainer = range.endContainer;
ret.end = range.endOffset;
ret.length = ret.end - ret.start;
ret.collapsed = range.collapsed;
return ret;
};
这是什么地方您选择的存储。
我然后要么重新选择文本,如果浏览器是DOM范围W3C标准(即所有,但IE)和执行的execCommand:
function handleReselection() {
if($.browser.msie) {
return this.selection;
}
else {
setSelection(this.selection);
return document
}
}
function setSelection(selection) {
var sel = window.getSelection();
sel.removeAllRanges();
var range = document.createRange();
range.setStart(selection.startContainer, selection.start);
range.setEnd(selection.endContainer, selection.end);
sel.addRange(range);
}
handleReselection().execCommand('bold', false, null);
答
一个简单的选择是使用<按钮>标签工具栏。这样它不会丢失文本选择。