使文本"更多"可选

Question

我在<p>标签中有文字:

<p>Hello world... and goodbye mind A B!</p>

如何增加文本可选区域？我知道我可以增加font-size,这会增加可选区域,但是有更好的方法吗？

澄清这个问题.例如,在移动屏幕上,我发现难以突出显示单个字母的单词i,但如果点击检测位于更宽的区域,则选择它会容易得多.

怎么做？一个令人费解的谜题.

赏金信息

寻找一个有效的跨浏览器解决方案.在发布答案之前,请仔细阅读问题和评论以避免混淆.用户@mmm发布了一个非常接近的问题,但在他的方法中,虽然<p>标签具有更广泛的命中检测(完美!),但它会在点击时自动选择.我需要用户与<p>标签交互,就像我们使用普通的基于文本的<p>标签一样...但是使用更大的命中检测器.

编辑

进一步澄清.例如,对这个问题的评论选择范围很大:

你可以在下面找到这个评论.将光标悬停在其上,直到光标变为cursor:text.这是默认的选择区域.

但我的目标是将其扩展到更大的区域,如下所示:

Answer 1

从我的测试它适用于iPhone以及ff和chrome - 如果有人可以测试android我会感激反馈!

边界显然可以删除.

此代码使用此答案中的代码(SelectText()函数的一部分): 选择元素中的文本(类似于用鼠标突出显示)

Fiddle

码:

function extendSelection() {
    var extendBy = arguments.length <= 0 || arguments[0] === undefined ? 15 : arguments[0];

    var extended = document.getElementsByClassName('extendedSelection');
    [].slice.call(extended).forEach(function (v) {
        var bounds = v.getBoundingClientRect();
        var x = bounds.left;
        var r = textWidth(v.innerHTML, ''+ css(v, 'font-weight') +' ' + css(v, 'font-size') + ' ' + css(v, 'font-family') );
        var y = bounds.top;
        var w = bounds.width;
        var h = bounds.height;
        var element = document.createElement('div');
        element.style.position = 'absolute';
        element.style.height = h + extendBy + 'px';
        element.style.width = r + extendBy + 'px';
        element.style.left = x - extendBy / 2 + 'px';
        element.style.top = y - extendBy / 2 + 'px';
        element.style.border = '1px dotted black';
        document.body.appendChild(element);
        element.addEventListener('click', function (e) {
            SelectText(v);
        });
        element.addEventListener('touchend', function (e) {
            SelectText(v);
        });
    });
}

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

function textWidth(text, font) {
    var el = textWidth.canvas || (textWidth.canvas = document.createElement("canvas"));
    var draw = el.getContext("2d");
    draw.font = font;
    var m = draw.measureText(text);
    return m.width;
};

function SelectText(element) {
    var doc = document,
        text = element,
        range,
        selection;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
        selection.setSelectionRange(0, element.value.length)
    }
}

extendSelection();

Answer 2

我假设您有一个文本正文，并且该文本正文中包含对最终用户而言相当重要或相关的信息，并且您希望他们能够轻松突出显示和复制该信息。

如果没有找到其他解决方案，这将被视为最后的选择，

<p class="surroundingText"> BLAH BLAH BLAH  <span class="importantText"> This is the information you would like users to be able to highlight </span> BLAH BLAH BLAH BLAH ETC ETC ETC </p>

如果将文本包裹在单独的段落标记中并给它们一个类，则在 CSS 中设置以下内容：

.surroundingText {

  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;         
}

.importantText {

        -webkit-user-select: all;  /* Chrome all / Safari all */
      -moz-user-select: all;     /* Firefox all */
      -ms-user-select: all;      /* IE 10+ */
      user-select: all;
    }

所以最终的结果是只能选择span标签之间的文本。