jQuery ‘val("")’ not working on bind ‘paste’ to make changes in input field

Question

I want to make change on input field using jQuery in such order when the user pasted a text which starting with '0' character. In other words if for example the user pasted '0' it will be changed to '1'.

My entire HTML code is like below:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#amount").bind("paste", function(evt) {
        var pastedData = evt.originalEvent.clipboardData.getData('text');
        if (pastedData.charAt(0).length != 0 && pastedData.charAt(0) == '0') {
            $("#amount").val("1");
            alert("you entered " + pastedData + "; but we can't change it to 1!");
        };
    });
});
</script>
</head>
<body>

paste 0 in this field. it shall be changed to 1, but the result will be 10!<br>
<input type="text" id="amount" placeholder="enter amount...">

</body>
</html>

But the problem is, when I paste '0' it will not change to '1'; it will be changed to '10'. Or if you enter '00000' it will be '100000'. In other words the code just prepend '1' to my pasted text.

Now can anyone tell me what's wrong with my code?

Thanks.

Just FYI, `bind()` is deprecated. Use [`on()`](https://api.jquery.com/on) instead. — Rory McCrossan, Sep 05 '19 at 09:14

score 2 · Accepted Answer · answered Sep 05 '19 at 09:00

You need to stop the paste event ussing preventDefault:

$(document).ready(function() {
    $("#amount").bind("paste", function(evt) {
        var pastedData = evt.originalEvent.clipboardData.getData('text');
        if (pastedData.charAt(0).length != 0 && pastedData.charAt(0) == '0') {
            $("#amount").val("1");
            evt.preventDefault();
            alert("you entered 0; but we can't change it to 1!");
        };
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
paste 0 in this field. it shall be changed to 1, but the result will be 10!<br>
<input type="text" id="amount" placeholder="enter amount...">

score 1 · Answer 2 · answered Sep 05 '19 at 09:00

When you are in the paste event, value is first assigned as 1, then you're not stopping the event from pasting hence whatever is in the clipboard gets pasted. You need to use evt.preventDefault() which will stop the event and from the pasted data remove the first 0 using pastedData.slice(1) if you want to use it:

$(document).ready(function() {
  $("#amount").bind("paste", function(evt) {
    var pastedData = evt.originalEvent.clipboardData.getData('text');
    if (pastedData.charAt(0).length != 0 && pastedData.charAt(0) == '0') {
      evt.preventDefault();
      $("#amount").val("1");// + pastedData.slice(1));
      alert("you entered 0; but we can't change it to 1!");
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
paste 0 in this field. it shall be changed to 1, but the result will be 10!<br>
<input type="text" id="amount" placeholder="enter amount...">

score 0 · Answer 3 · answered Sep 05 '19 at 09:00

0

try this:

$(this).attr('value', '1');

instead of this line :

$("#amount").val("1");

answered Sep 05 '19 at 09:00

bik

319
1
8

João Pimentel Ferreira · Answer 4 · 2019-09-05T09:08:07.037

You just need to return false at the end of the if statement inside the bind function. By returning false you prevent the default behaviour and stop propagation, avoiding then the pasting of 0 that was on the waiting list to be added after 1.

Check your exemple here, it is working like you want and I just added return false.

$(document).ready(function() {
    $("#amount").bind("paste", function(evt) {
        var pastedData = evt.originalEvent.clipboardData.getData('text');
        if (pastedData.charAt(0).length != 0 && pastedData.charAt(0) == '0') {
            $("#amount").val("1");
            alert("you entered 0; but we can't change it to 1!");
            return false;
        };
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

paste 0 in this field. it shall be changed to 1, but the result will be 10!<br>
<input type="text" id="amount" placeholder="enter amount...">

jQuery ‘val("")’ not working on bind ‘paste’ to make changes in input field

4 Answers4