在 IE8/9 中的文本区域粘贴到当前值之前如何访问剪贴板和当前光标位置？

Question

由于 IE8/9 不支持 HTML5 的 maxlength 属性，我需要找到一种方法来防止将过长的文本粘贴到 textarea/input 中，因此我选择通过 jQuery 使用 onpaste-attribute/eventhandler，请参阅下面的示例代码：

$(document).ready(function() {
  $('textarea[maxlength]').on('paste', function() {
    var maxlength = $(this).attr('maxlength');
    if (this.value.length >= maxlength) {
      this.value = this.value.substr(0,maxlength);
    }
  });
});

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

<textarea maxlength="10"></textarea>

问题在于，在 IE8/9 中，当您粘贴超过 10 个字符的文本时，它会在 textarea 内暂时完全可见，然后事件处理程序才会切断所有超过 maxlength 的文本，这显然是不需要的。看起来粘贴的文本在短时间内变成了 textarea 的当前值——这永远不会发生。

所以我需要拦截textarea的值更新，并在粘贴的文本真正变成当前值之前检查它的长度。

实现这一目标的最佳方法是什么？

Answer 1

您可以使用

访问剪贴板内容

window.clipboardData.getData('Text')

并在将其放入文本框之前根据需要对其进行操作。

请务必返回 false，否则粘贴事件将触发并替换您所做的。

要访问当前值，请读取 textarea 的 innerText 值。

要获取当前光标位置，请读取 selectionStart 属性。如果没有选择，则 selectionStart 属性将为您提供当前位置。如果有选择，您也可以使用 selectionEnd。