jquery - On Paste, Getting input value not working

Question

I have been trying to get the value of an input of paste, but it always returns nothing:

$('form#post-game :input[name="header"]').keyup(function(){
    var str = $(this).val();
    IsImageValid(str, "#post-game-img-header");
});

$(document).on('paste','form#post-game :input[name="header"]',function(e) {
    var str = $('form#post-game :input[name="header"]').val();
    IsImageValid(str, "#post-game-img-header"); // there is a console log in this function
});

The keyup works fine, But the paste does not.

`$(document).on('input','form#post-game :input[name="header"]',function(e) {/**/});` check for oninput event support. Your issue is onpaste is fired before the value of input is updated. — A. Wolff, Sep 15 '13 at 17:17
@FouadFodail Because i thought that might not have worked with .on, So i changed it to that. — Tristan Cunningham, Sep 15 '13 at 17:19
May be val() needs time to get populated. See : http://stackoverflow.com/questions/686995/jquery-catch-paste-input — Fouad Fodail, Sep 15 '13 at 17:23

score 2 · Answer 1 · answered Sep 15 '13 at 17:43

Use the custom event afterpaste, paste method fires imediately some content is pasted, but some time s gives null value.

This afterpaste method fires after 0 ms of paste method, and works fine in every case.

//Custom event After paste
$('HTML').on('paste', function (e) {
    e = $.extend({}, e, { type: 'afterpaste' });
    window.setTimeout(function () { $(e.target).trigger(e); }, 0);
});

//changed paste to afterpaste
$(document).on('afterpaste','form#post-game :input[name="header"]',function(e) {
    var str = $('form#post-game :input[name="header"]').val();
    IsImageValid(str, "#post-game-img-header"); // there is a console log in this function
});

Sergio · Answer 2 · 2013-09-15T17:41:53.137

0

Use .on('input propertychange', instead of .on('paste',.

Try this:

$(document).on('input propertychange','form#post-game input[name="header"]',function(e){ 
    var str = this.value;
    IsImageValid(str, "#post-game-img-header"); // there is a console log in this function
});

More info:

MDN: input
MSDN: propertychange (needed for older versions of IE)

edited Sep 15 '13 at 17:41

answered Sep 15 '13 at 17:35

Sergio

28,539
11
85
132

Responds to ALL property changes including keypresses. Not very useful if you want to take action based soley upon a user pasting text. – Johann Jan 16 '14 at 11:55
@AndroidDev, its delegated to `form#post-game input[name="header"]`, so its just for that input, how would you do it? – Sergio Jan 17 '14 at 08:02

jquery - On Paste, Getting input value not working

2 Answers2