Combining two input events

Question

i am aiming to remove the javascript from the input so i’m writing a bit of jquery

the javascript:

    <input type="text" id = "IDthisinput'" class="CLthisinput'"  placeholder="First"
            onChange   = "dosomething();"
            onKeyPress = "this.onchange();"
            onpaste    = "this.onchange();"
            oninput    = "this.onchange();"
    />
    <span id="ReturnedMsg"></span>
    <span id="IDActionVal"></span>

the jquery:

    $('.CLthisinput').on('keyup', function () {
            $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
            $('#IDActionVal').html('#'+this.id + '  ' + 'keyup ' + $(this).val());
    });
    $('.CLthisinput').on('paste', function () {
            $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
            $('#IDActionVal').html('#'+this.id + '  ' + 'keyup ' + $(this).val());
    });

I’m stumped when it comes to shortening the above, which works fine, to something like this:

    $('.CLthisinput').on('keyup', 'paste', function () {
            var theaction = event
            $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
            $('#IDActionVal').html('#'+this.id + '  ' + theaction + '  ' + $(this).val());
    });

How can I get the events to work together?!

where you see the class name thisinput (in Lumino's and Dzmitry's answers below) it should read CLthisinput. the discrepancy originates from my typo in my original post! — blind to the onbvious
– blind to the onbvious, Commented Mar 11, 2017 at 23:34

lumio · Accepted Answer · 2017-03-11 22:42:12Z

2

Another way would also be to outsource that function, like so:

var helper = function() {
  $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
  $('#IDActionVal').html('#'+this.id + '  ' + 'keyup ' + $(this).val());
}
$('.CLthisinput').on('keyup', helper);
$('.thisinput').on('paste', helper);

answered Mar 11, 2017 at 22:42

lumio

7,6054 gold badges42 silver badges60 bronze badges

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

1 Comment

blind to the onbvious Over a year ago

i like this and Dzmitry's answer. Going to accept that answer because of the added explanation. But great to see two working alternatives. Thanks.

Dzmitry Kushnarou · Accepted Answer · 2017-03-11 23:57:50Z

0

Enumerate both events in the same string, separated by space:

$('.thisinput').on('keyup paste', function () {
        var theaction = event
        $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
        $('#IDActionVal').html('#'+this.id + '  ' + theaction + '  ' + $(this).val());
});

You can’t pass them as separate arguments, because $('.thisinput').on('keyup', 'paste', ...) does something completely different: it fires when a keyup event occurs inside <paste> tag inside .thisinput (and allows <paste> tags to be added dynamically).

You can use event.type to find out the type of the event:

$('.thisinput').on('keyup paste', function () {
        var theaction = event
        $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
        $('#IDActionVal').html('#'+this.id + '  ' + theaction.type + '  ' + $(this).val());
});

Also, don’t use the global event object (also known as window.event). This is a non-standard extension introduced by Microsoft, it will not work in Firefox. Instead, pass the event as an argument to your callback:

$('.thisinput').on('keyup paste', function (event) {
        var theaction = event
        $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
        $('#IDActionVal').html('#'+this.id + '  ' + theaction.type + '  ' + $(this).val());
});

Also, you don’t really need theaction and event to be separate variables:

$('.thisinput').on('keyup paste', function (theaction) {
        $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val()));
        $('#IDActionVal').html('#'+this.id + '  ' + theaction.type + '  ' + $(this).val());
});

edited Mar 11, 2017 at 23:57

answered Mar 11, 2017 at 22:37

Dzmitry Kushnarou

5763 silver badges10 bronze badges

4 Comments

blind to the onbvious Over a year ago

thanks I now see it, I added a var theaction so I can identify which event it was, any help there

blind to the onbvious Over a year ago

i like it, I like the solution and the explanation too. Thanks.

blind to the onbvious Over a year ago

i like Lumio's answer too, which I'm sure those two events would have been enumerated in the same string had I not made a typo in the CLass name. Cheers for both routes.

blind to the onbvious Over a year ago

re: .type cheers, it's the teach yourself route that's holding me back! i must have read that one @ api.jquery.com/event.type a dozen times in the past, your putting my var as the function param has connected a few more neurons!!

Collectives™ on Stack Overflow

Combining two input events

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related