Question

我有一个 contenteditable

的div

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

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

类似的东西：

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

Answer 1

你可以尝试这样的事情：

没有'selectend'事件，但是当用户通过观看mouseup事件完成选择时我们可以解决

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

Answer 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());
}

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

Answer 3

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

.select（handler（eventObject））返回：jQuery 将事件处理程序绑定到＆＃34;选择＆＃34; JavaScript事件，或在元素上触发该事件。

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

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

检查link

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

3 个答案: