Remove white spaces after paste with jQuery

Question

I tried it (jsfiddle), but it's not working.

How can you see the alert is empty. It's like .val() function starts before the string is copied.

$(document).on('paste', '#pasteIt', function(){
    alert($("#pasteIt").val());
    var withoutSpaces = $("#pasteIt").val();
    withoutSpaces = withoutSpaces.replace(/\s+/g, '');
    $("#pasteIt").text(withoutSpaces);
});

Why?

score 14 · Accepted Answer · answered Sep 27 '15 at 16:06

14

Get clipboard data

$(document).on('paste', '#pasteIt', function(e) {
  e.preventDefault();
  // prevent copying action
  alert(e.originalEvent.clipboardData.getData('Text'));
  var withoutSpaces = e.originalEvent.clipboardData.getData('Text');
  withoutSpaces = withoutSpaces.replace(/\s+/g, '');
  $(this).val(withoutSpaces);
  // you need to use val() not text()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="pasteIt" placeholder="Paste something here">

Ref : https://forum.jquery.com/topic/paste-event-get-the-value-of-the-paste#14737000004101955

answered Sep 27 '15 at 16:06

Pranav C Balan

113,687
23
165
188

It works! Can you explain me what `e.preventDefault(); alert(e.originalEvent.clipboardData.getData('Text'));` do? Thank you! – Dave Sep 27 '15 at 16:11
`e.preventDefault(); ` is for avoiding the default action, that copying content to the input box. We don't need to perform, instead we need to paste the space removed value – Pranav C Balan Sep 27 '15 at 16:13
`e.originalEvent.clipboardData.getData('Text')` is for getting clipboard content – Pranav C Balan Sep 27 '15 at 16:14

score 2 · Answer 2 · edited Sep 28 '15 at 08:20

2

Use setTimeout, this delays the check so the value is retrieved. Check it out here.

$(document).on('paste', '#pasteIt', function () {
    setTimeout(function () {
        alert($("#pasteIt").val());
        var withoutSpaces = $("#pasteIt").val();
        withoutSpaces = withoutSpaces.replace(/\s+/g, '');
        $("#pasteIt").val(withoutSpaces);
    }, 1);
});

edited Sep 28 '15 at 08:20

Salman A

262,204
82
430
521

answered Sep 27 '15 at 16:04

TheOnlyError

1,441
12
19

It does, but the solution of Pranav is a better one. Try that one out. – TheOnlyError Sep 27 '15 at 16:10
You must use `.val`, not `.text` to set the value – Universal Electricity Sep 27 '15 at 16:16
It doesn't work because 1 millisecond is far too short. If you change the 1 to 250 (quarter of a second) it works fine. – NickG Feb 06 '18 at 16:07

Universal Electricity · Answer 3 · 2015-09-27T16:20:51.557

0

So, you want this:

$(document).on('paste', '#pasteIt', function(e) {
  window.setTimeout(function() {
    var withoutSpaces = $("#pasteIt").val();
    withoutSpaces = withoutSpaces.replace(/\s+/g, '');
    $("#pasteIt").val(withoutSpaces);
  }, 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<span>Enter: </span>
<input id="pasteIt">

</html>

edited Sep 27 '15 at 16:20

answered Sep 27 '15 at 16:14

Universal Electricity

775
1
12
26

Remove white spaces after paste with jQuery

3 Answers3