在textarea selectionchange上的jQuery

Question

如何处理selectionchange的{​​{1}}事件？

我试过了：

textarea

不工作。我错了吗？

Answer 1

当selectionchange上的当前文本选择发生更改时，将触发document事件。仅当目标对象为document时，此事件才有效。 HTML Input Element和HTML Text Area Element的此事件仅在Firefox 52及更高版本中受支持。请参阅Browser compatibility。

那么，您是否需要在textarea中获取所选文本？您可能会要求selectionStart和selectionEnd（在Internet Explorer中不存在，适用于Firefox和Chrome）。请参阅以下示例：

示例：

$( document ).on( 'mouseup', 'body', function() {
  console.clear();

  if ( getSelectionText() ) console.log( getSelectionText() )
});

function getSelectionText() {
  if ( window.getSelection ) {
    try {
      var tarea = $( 'textarea' ).get(0);

      return ( tarea.selectionStart !=  tarea.selectionEnd ) ? 'The event triggered. You select "' + tarea.value.substring( tarea.selectionStart,  tarea.selectionEnd ) + '"' : '';
    } catch ( e ) {
        console.log( 'Cant get selection text' )
      }
    }

    // For IE
    if ( document.selection && document.selection.type != 'Control' )
      return document.selection.createRange().text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea>Salam textarea</textarea>

Answer 2

您应该可以通过使用焦点HTML来实现这一点：

<form>
 <input id="target" type="text" value="Field 1">
 <input type="text" value="Field 2">
</form>
<div id="other">
 Trigger the handler
</div>

的Javascript

  $( "#target" ).focus(function() {
    alert( "Handler for .focus() called." );
  });

通过上面的示例，您将了解如何使用焦点来解决问题