HTML 内容可编辑 div：选择文本事件答案

【问题标题】：HTML Content Editable div: select text eventHTML 内容可编辑 div：选择文本事件
【发布时间】：2012-11-08 09:13:15
【问题描述】：

我有一个 contenteditable

的 div

<div class="editable" contenteditable="true"></div>

用户可以在其中输入任何内容。当用户在 div 中进行选择时，有什么方法可以获取事件。

类似：

$('.editable').onSelection(function(e, selection){alert(selection);}

【问题讨论】：

Selected text event trigger in Javascript :) 的可能副本可能会有所帮助！
@Tats_innit 感谢您的指点。但是stackoverflow.com/a/11786495/1008421 解决了这个问题。但我想如果有其他更好的方法来做到这一点

标签： javascript jquery html jquery-events

【解决方案1】：

你可以试试这样的：

没有 'selectend' 事件，但我们可以通过观察 mouseup 事件来确定用户完成选择的时间

$(function () {
    $('.editable').on('selectstart', function () {
        $(document).one('mouseup', function() {
            alert(this.getSelection());
        });
    });
});

【讨论】：

您可能还想在与mouseup 相同的事件处理程序中添加keyup，以便使用键盘选择文本也可以工作

【解决方案2】：

根据@Elliot 的回答和@Michael Bates 的评论，这似乎对于鼠标和键盘选择事件都完美无缺（例如在 TypeScript 中）：

export function attachSelectionListener(element: HTMLElement) : void {
  if (!element.contentEditable) {
    return;
  }
  element.onselectstart = () => handleSelectionChange(element);
}

function handleSelectionChange(element: HTMLElement): void {
  document.onmouseup = () => retrieveSelection(element);
  document.onkeyup = () => retrieveSelection(element);
}

function retrieveSelection(element: HTMLElement) : void {
  const selection = document.getSelection();

  // Ignore empty selection
  if (!selection || !selection.toString()) {
    return;
  }
  alert(selection.toString());
}

在您的应用中使用它时，您可能想检查是否需要在某个时候再次删除侦听器。

【讨论】：

【解决方案3】：

$('#ta').select(function() {
alert('Handler for .select() called.');
});

.select( handler(eventObject) ) 返回：jQuery 将事件处理程序绑定到“选择”JavaScript 事件，或在元素上触发该事件。

.select(handler(eventObject)) handler(eventObject)每次触发事件时执行的函数。

.select( [eventData], handler(eventObject) ) eventData 将传递给事件处理程序的数据映射。 handler(eventObject)每次触发事件时执行的函数。

检查link

【讨论】：

on.select 不会触发 contenteditable。 ref: "此事件仅限于字段和框。"