Google Chrome浏览器的"user-select:element"解决方法？

Question

我正在开发一个gui工具,可以选择文本框,拖动文本框并编辑内容.考虑在绘图程序(如powerpoint)中进行文本编辑.我对文本选择有一些非常具体的要求.我需要确保在其中一个框中选择文本时,选择不会扩展到其他相邻框中的文本.

好消息是有一种方法可以做到这一点,坏消息是它只是IE,我需要为Chrome找到解决方法.

user-select:元素

仅在Internet Explorer中受支持.允许选择在元素内开始; 但是,选择将包含在该元素的边界内.

我猜测解决方法需要做一些事情,比如监听selectstart,selectchange事件,调用preventDefault(),并手动操作选择对象.

任何想法赞赏;)

更新:这是一个大多数工作的小提琴.错误是,我需要以某种方式阻止Ctrl-A,并且在窗口外选择和释放鼠标会使其他文本暂时无法选择.不确定如何解决这些问题,任何人？提示风滚草......

HTML

<div id="one" class="textbox">qwe qweqwe <b>werwesd ewrwer</b> fsdfdsrwe fdsfsdf erertre fsdfsdf</div>

<div id="two" class="textbox">dsgdfs dfgdsf dfgdfg dfgdfs <i>dfsgsdf</i> dfsgdfsg</div>

CSS

.textbox {          
    position: absolute;
    -webkit-user-select: text;
    width: 250px;           
    font-size: 30px;
    border: 1px solid black;
}

#one { left: 150px; top: 150px; }
#two { left: 450px; top: 250px; }

JS

document.addEventListener('mousedown', mousedown, false);
document.addEventListener('mouseup', mouseup, false);

// While selecting disallow selection of other text.
function mousedown(event) {
    console.log('mousedown', event.target);         
    var current = findParentTextBox(event.target);
    var list = document.querySelectorAll('.textbox');
    for (var i = 0, textbox; textbox = list[i]; i++) {
        if (textbox != current) {
            textbox.style.webkitUserSelect = 'none';
        }
    }
}

// Once finished selecting allow all text to be selected again.
function mouseup(event) {
    console.log('mouseup', event.target);
    var list = document.querySelectorAll('.textbox');
    for (var i = 0, textbox; textbox = list[i]; i++) {
        textbox.style.webkitUserSelect = 'text';
    }
}

function findParentTextBox(node) {
    while (node != null) {
        if (node.className == 'textbox')
            return node;
        node = node.parent;
    }
    return null;
}

编辑:

提起了一个chrome bug:https://code.google.com/p/chromium/issues/detail？ id = 346533

Answer 1

不确定它是否会干扰您的其他交互需求（拖动需要测试），但 iframe 可能适合您。它们具有您想要的开箱即用的选择行为（包括全选）。您必须使用 javascript 或外部来源来填充它们。这是带有 iframe 的 jsfiddle（使用 js 从 div 创建 iframe）： http://jsfiddle.net/5y8EA/3/

对于可编辑文本，您可以检查contenteditable属性： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable