Jquery binding to multiple elements

Question

I have the following jquery binding to listen for paste action in certain text input elements. Is there a way inside of the function to get a reference to the actual element that triggered the event? My goal is to clear out the text in the input if anything is pasted inside out it, but 'this' doesn't seem to be correct.

Edit, the code has been updated:

    $(window).on("load", function() {
        $('.watchable').bind("paste", function() {
            alert('called!');
            $(this).val('');
        });
    });

I am using JQuery 1.11.3. I see the alert, but the text is not cleared out.

Here is a jsFiddle demo. Paste any text into either of the 2 text fields, the alert displays, but the text in the text field is not cleared out.

https://jsfiddle.net/8bep1Lxh/

FYI as of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. — j08691
– j08691, Commented Oct 16, 2015 at 16:48
I've verified that the event is triggered with an alert, but the text still doesn't clear out. — user1154644
– user1154644, Commented Oct 16, 2015 at 16:56

Alvin Pascoe · Accepted Answer · 2015-10-17 00:37:53Z

1

Update

If you'd like to always clear the field when pasting is attempted, then see the following updated examples:

My Fiddle - https://jsfiddle.net/8v08n4vx/

Your Fiddle - https://jsfiddle.net/jmap4jhy/

They prevent the default paste event unless the field is already empty.

If you'd like to prevent it altogether, simply remove the if ($(this).val() !== ""){ statement.

My Fiddle - https://jsfiddle.net/7Lsr7j78/

Your Fiddle -https://jsfiddle.net/pzb9s7s4/

(However, you should think about the possible negative impact manipulating the ubiquitious paste event may have on user experience)

$('.watchable').on('paste', function (e) {

  //if field is not empty
  if ($(this).val() !== "") {

    // prevent default paste event
    e.preventDefault();
    // and clear field
    $(this).val('');

  }

});

Seeing as you're using a version of jQuery greater than 1.7, you should use on instead of bind.

My Fiddle - https://jsfiddle.net/ae8ufz7y/

Your Updated Fiddle - https://jsfiddle.net/83263j4e/

You simply need to add the following JavaScript:

$('.watchable').on('paste', function () {
  // on paste, clear input
  $(this).val('');
});

Here is the jQuery documentation on the on method: http://api.jquery.com/on/

edited Oct 17, 2015 at 0:37

answered Oct 16, 2015 at 17:13

Alvin Pascoe

1,2098 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Alvin Pascoe Over a year ago

@user1154644 - It's working fine for me. What is not working? If you paste something into the text field, the current text disappears and only the new text is present. Is that not happening for you or have I misunderstood your requirements?

Alvin Pascoe Over a year ago

@user1154644 - Also, which one isn't working...my fiddle or your one (or both)? Thanks.

user1154644 Over a year ago

either of them. when I go to your fiddle, I remove the text that is in the box, paste some text in, and it stays, it isn't cleared out

Alvin Pascoe Over a year ago

@user1154644 - I'm not sure I understand what you'd like. The fiddles work as follows: if you paste text into the textbox, the current text clears automatically and the new pasted text is the only text in the textbox. If try to paste something into an empty box (like you just described), the current text will be cleared (but seeing as there's no content, it just remains blank) and the new text will be pasted into the textbox. Try to paste something into my first example WITHOUT first manually clearing the textbox...only your pasted text will be present, the 'Lorem Ipsum' will be cleared.

Alvin Pascoe Over a year ago

@user1154644 - Let me know if that clears it up, or did you want it to behave differently?

|

Sajin Andrei · Accepted Answer · 2015-10-16 17:20:46Z

0

Better I think is to disable the paste event instead to clear out the text

$('.some-el').on('paste', function() {
  return false;
});

On paste event the value of input can't be captured(and modified) because the input change asynchronously with 'paste' event.

Just the next event can capture the value of input after paste event

$('.some-el').on('input', function() {});

answered Oct 16, 2015 at 17:20

Sajin Andrei

11 bronze badge

Collectives™ on Stack Overflow

Jquery binding to multiple elements

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related