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&nbsp;ID="editor"&nbsp;ClientIDMode="static">...</asp:TextBox>

Answer 2

绑定到粘贴事件，您必须设置超时以确保填充粘贴的值。原因是，粘贴事件不是立即发生的（4 毫秒），因此超时迫使队列进入概念顺序。$("#foo").on('paste', function(e) { // <---- e, event&nbsp; var pastedData = e.target.value;&nbsp; setTimeout(function() {&nbsp; &nbsp; console.log($(e.currentTarget).val());&nbsp; }, 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() {&nbsp; &nbsp; &nbsp; &nbsp; var $editor&nbsp; &nbsp; = $('#editor');&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $editor.on('paste, keydown', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $self = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $oldContent = $self.text(); // The old content in the control&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $pastedContent = $editor.val(); // Pasted content&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Clean data to meet requirements&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $pastedContent = #pastedContent.replace(/(\r\n|\n|\r|\s+)/gm, " ");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $editor.val($pastedContent);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },100);&nbsp; &nbsp; &nbsp;});});感谢所有提供帮助的人。