代码之家 › 专栏 › 技术社区 › 3gwebtrain

如何从窗口更新文本选择版本

jquery

-1

3gwebtrain · 技术社区 · 10 年前

使用用户鼠标选择,我得到 selected 文本和更新到容器。当用户单击(选择已释放)时,我希望更新 挑选出来的 文本为空。

我试过这种方法,但似乎工作不正常,

    $('#tenderContent').on('mouseup', '.tenderdocument', function(e){
    e.stopPropagation();
    if($.trim(window.getSelection().toString()).length) {
       $('#text').text(window.getSelection().toString());
    }
});

$('#tenderContent').on('click', '.tenderdocument', function () {
    var selection = $.trim(window.getSelection().toString());
    if(!selection) {
        console.log("there is no selection"); //nothing consoles after selection released
        $.event.trigger({type:'textUnselected'});
    }
});

Live

2 回复 | 直到 10 年前

Rory McCrossan Hsm Sharique Hasan 10 年前

您只需要删除 if 更新前检查选择的条件:

$('#tenderContent').on('mouseup', '.tenderdocument', function (e) {
    e.stopPropagation();
    $('#text').text(window.getSelection().toString());
});

使现代化

如果要在清除选择时运行特定功能,请尝试以下操作:

$('#tenderContent').on('mouseup', '.tenderdocument', function (e) {
    e.stopPropagation();
    if ($.trim(window.getSelection().toString()).length) {
        $('#text').text(window.getSelection().toString());
    }
    else {
        $('#text').empty();
        console.log("there is no selection"); //nothing consoles after selection released
        $.event.trigger({ type:'textUnselected' });
    }
});

Updated fiddle

sled 10 年前

您只关注 .tenderdocument 内的元素 #tendercontent ,如果单击发生在该区域之外,则不会引起注意。

尝试在文档级别绑定以捕获所有单击,如下所示:

$('#tenderContent').on('mouseup', '.tenderdocument', function(e){
    e.stopPropagation();
    if($.trim(window.getSelection().toString()).length) {
       $('#text').text(window.getSelection().toString());
    }
});

$(document).on('click', function (e) {
    var selection = $.trim(window.getSelection().toString());
    if(!selection && !$('#text').is(':empty')) {
        $('#text').empty();
        alert('text emptied!');
    }
});

JSFiddle: http://jsfiddle.net/hdaj1t7w/3/