Asp.Net TextBox 并通过 JavaScript/JQuery 捕获粘贴事件以清理数据

Question

我有一个 asp.net TextBox 控件，我希望能够捕获粘贴事件，清除用户粘贴的文本并在 TextBox 控件中显示最终结果。我尝试了许多不同的方法，但没有一种方法能按预期工作。<asp:TextBox ID="editor">...</asp:TextBox> 我需要一个适用于所有浏览器的解决方案。我现在正在处理这样的事情。$(document).ready(function() {        var $editor    = $('#editor');        /// Control used for testing, the control with ID editor will be overwritten         /// with the cleaned text.        var $clipboard = $('<textarea />').insertAfter($editor);                 $editor.on('paste, keydown', function() {              var $self = $(this);                          setTimeout(function(){                     var $content = $self.text();                                 $clipboard.val($content);            },100);     });});如果 editor 是一个 div 标签的 ID，这将完美地工作，但如果 editor 是一个 TextBox 控件的 ID，这将不起作用。我得到了 TextBox 的旧内容，而不是用户粘贴的内容。任何人都可以解释为什么上面的代码可以在 DIV 标签上工作，但不能在 TextBox 控件上工作？

Answer 1

Asp 控件在运行时更改 id，因此您无法捕获给定的 id。

因此，要捕获实际 ID：

选项1。

var $editor = ("#<%= editor.ClientID %>");

选项2，使用ClientIDMode="static"。

<asp:TextBox ID="editor" ClientIDMode="static">...</asp:TextBox>

Answer 2

绑定到粘贴事件，您必须设置超时以确保填充粘贴的值。原因是，粘贴事件不是立即发生的（4 毫秒），因此超时迫使队列进入概念顺序。

$("#foo").on('paste', function(e) { // <---- e, event

  var pastedData = e.target.value;

  setTimeout(function() {

    console.log($(e.currentTarget).val());

  }, 0);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="foo" rows="20" cols="50">

I am a working textbox example

</textarea>

Answer 3

我已经弄清楚如何捕获粘贴的文本，这里是一个更新的 jquery 函数

$(document).ready(function() {

        var $editor    = $('#editor');

        

        $editor.on('paste, keydown', function() {

              var $self = $(this);            

              setTimeout(function(){ 

                    var $oldContent = $self.text(); // The old content in the control

                    var $pastedContent = $editor.val(); // Pasted content

                    // Clean data to meet requirements

                    $pastedContent = #pastedContent.replace(/(\r\n|\n|\r|\s+)/gm, " ");

                    $editor.val($pastedContent);

            },100);

     });

});

感谢所有提供帮助的人。