Asp.Net TextBox and capturing Paste Events via JavaScript/JQuery to Clean Data

Question

I have a asp.net TextBox control and I want to be able to capture a paste event, clean the text that is paste by the user and show the end result in the TextBox control. I have tried many different ways and yet none are working as intended.

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

I need a solution that works in all browsers.

I am working with something like this right now.

$(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);
     });
});

If editor is the ID of a div tag, this works perfectly but if editor is the ID of a TextBox control, this does not work. I get the old contents of the TextBox and not what was paste in by the user.

Can anyone explain why this above code works one a DIV tag but not on the TextBox control?

Can you please include the work you have done with text editing? Have you tried using regex? There's some [StackOverflow discussion on binding to the `paste` event](https://stackoverflow.com/questions/11605415/jquery-bind-to-paste-event-how-to-get-the-content-of-the-paste) that i think is probably relevant. — wahwahwah, Sep 24 '20 at 13:27
I have not done any yet since I am not capturing what was paste in to the textbox. Once I know I am getting the pasted data, I will use regular expressions to clean. Cleaning the pasted data will not be the problem. — Michael Brown, Sep 24 '20 at 13:30
If you find yourself listing tasks to be completed in a SO question, you should really *try* to do those steps before posting. Each of these items should be posted as a separate question if you're struggling to find a solution, but you should really give it a whirl and then post what's hanging you up. — wahwahwah, Sep 24 '20 at 13:46
@wahwahwah, It's exactly what I did, This post spells out exactly what the hang up is. — Michael Brown, Sep 24 '20 at 13:50
I edited your post to be more concise. If you have further issues with your project, please post each item as a separate question. — wahwahwah, Sep 24 '20 at 14:08

4b0 · Answer 1 · 2020-09-24T14:04:15.403

1

Asp control change id on run time so you are unable to catch given id .

So to catch actual id:

Option 1.

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

Option 2 , use ClientIDMode="static".

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

edited Sep 24 '20 at 14:04

answered Sep 24 '20 at 13:52

4b0

21,981
30
95
142

I tried option 1 and it did not solve the issue. As for option 2, I already have ClientIDMode="static" – Michael Brown Sep 24 '20 at 13:55
Yes, Uncaught TypeError: $editor.on is not a function – Michael Brown Sep 24 '20 at 14:17
@MichaelBrown `$editor` in your code is a variable, `.on()` is a jquery function - so `$($editor).on()` – wahwahwah Sep 24 '20 at 14:25
jQuery version ? – 4b0 Sep 24 '20 at 14:31
I fixed the exception but got the same results. I have since found the solution below. – Michael Brown Sep 24 '20 at 14:38

wahwahwah · Answer 2 · 2020-09-24T14:27:23.583

Bind to the paste event, and you have to set a timeout to ensure that the pasted values are populated. The reason is, the paste event isn't immediate (4ms) so the timeout forces the queue into conceptual order.

$("#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>

score -1 · Answer 3 · answered Sep 24 '20 at 14:36

I have figured out how to capture the pasted text, here is an updated jquery function

$(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);
     });
});

Thank you everyone who pitched in to help.

Asp.Net TextBox and capturing Paste Events via JavaScript/JQuery to Clean Data

3 Answers3