在 IE8/9 中的文本区域粘贴成为当前值之前如何访问剪贴板和当前光标位置?
How to access clipboard and current cursor position when pasting in a textarea in IE8/9 before it becomes the current value?
由于IE8/9不支持HTML5的maxlength属性,我需要找到一种方法来防止将太长的文本粘贴到textarea/input中,所以我选择了onpaste
-attribute/eventhandler 通过 jQuery,参见下面的示例代码:
$(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的值更新,并在粘贴的文本实际成为当前值之前检查其长度。
实现此目标的最佳方法是什么?
您可以使用
访问剪贴板内容
window.clipboardData.getData('Text')
并在将其放入文本框之前根据需要对其进行操作。
一定要 return false 否则粘贴事件将触发并替换您所做的。
要访问当前值,请读取文本区域的 innerText 值。
要获取当前光标位置,请读取 selectionStart 属性。如果没有选择,selectionStart 属性 将为您提供当前位置。如果有选择,您也可以使用 selectionEnd。
由于IE8/9不支持HTML5的maxlength属性,我需要找到一种方法来防止将太长的文本粘贴到textarea/input中,所以我选择了onpaste
-attribute/eventhandler 通过 jQuery,参见下面的示例代码:
$(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的值更新,并在粘贴的文本实际成为当前值之前检查其长度。
实现此目标的最佳方法是什么?
您可以使用
访问剪贴板内容window.clipboardData.getData('Text')
并在将其放入文本框之前根据需要对其进行操作。
一定要 return false 否则粘贴事件将触发并替换您所做的。
要访问当前值,请读取文本区域的 innerText 值。
要获取当前光标位置,请读取 selectionStart 属性。如果没有选择,selectionStart 属性 将为您提供当前位置。如果有选择,您也可以使用 selectionEnd。