Remove last four characters from form text input field

Question

I have a form for data collection and one text input field is for tracking numbers. I use a barcode scanner to scan shipping labels as an easy way to capture the tracking number. Then I paste the number into that field. However, this one particular type of shipping label, from FedEx, adds the form number to the end of the tracking number.

Is there a way to use JavaScript or JQuery to check the input, right after it is pasted, and remove the last four characters if they are '0663'? Can someone provide a sample if this is possible?

I'm sure you can implement your solution using a function handler in your onchange html attribute of that input element. Please try to figure out how and ask again with your code :) — Mocca, Oct 17 '18 at 00:48
This will work, but the string MUST end with 0663. **.+(?=0663$)**. But, like @don'tangryme said, if you post multiple examples, maybe we can help you getting something more general. — lucas_7_94, Oct 17 '18 at 00:49
something like this https://stackoverflow.com/questions/42089713/modify-clipboard-content-after-copy-event-javascript-jquery or just before this step? — Chase Choi, Oct 17 '18 at 00:49

score 1 · Accepted Answer · answered Oct 17 '18 at 01:03

1

Here's a working solution. Just run the code snippet below.

Tested in Chrome. May require some of the commented code to be uncommented in other browsers.

const input = document.getElementById('fred');

const removeEnd = (value) => {
  console.log('value', value);
  if (value.match('0663$')) {
    const newValue = value.slice(0, -4);
    input.value = newValue;
  }
}

input.onkeyup = (evt) => {
  removeEnd(evt.target.value);
}
input.onpaste = (evt) => {
  // might be needed
  // removeEnd(evt.target.value);
}
input.oninput = (evt) => {
  // might be needed
  // removeEnd(evt.target.value);
}

<input id="fred">

answered Oct 17 '18 at 01:03

danday74

52,471
49
232
283

1

Thank you! This works in every browser except for the Roboform Android Browser which is what I use, LOL. When I paste or even type the number into the form field, the JavaScript doesn't appear to be triggered. Are there any other input events to listen for to accommodate the Roboform browser? – Jeff Oct 17 '18 at 11:48
not sure dont have time to look right now but might be worth converting some of this to jQuery which should handle cross browser compatibilities for you, is jQuery an option? are you familiar with it? – danday74 Oct 17 '18 at 11:54
1

I found the problem with the Roboform browser... Clearing the browser's cache within the browser's settings does not clear all cache even when the options to clear history, cookies, other site data, images and files are all ticked. I went into the phone's app settings and cleared Roboform's cache from there and presto! Thanks again. Your's is the best answer. – Jeff Oct 17 '18 at 13:54

score 0 · Answer 2 · answered Oct 17 '18 at 00:58

0

Here:

let code = '123412341234123412340663';
console.log(code.substring(0,code.length-4));

answered Oct 17 '18 at 00:58

Randy Casburn

13,840
1
16
31

score 0 · Answer 3 · answered Oct 17 '18 at 02:07

The following demo uses:

HTMLFormControlsCollection to access the <form>, <input>, and <output> tags.
oninput event to call the callback function: lastFour(). input event happens when the registered <input> tag gets any data entered by the user.
substring() and slice() to manipulate the string value

// Reference the <form>
var shp = document.forms[0].elements;
// Reference the <input>
var trk = shp.trackingNumber;

// Assign event handler for input event
trk.oninput = lastFour;

// Callback function
function lastFour(e) {
  /*
  Get the value of the tag that the input event 
  occurred on (i.e. <input>)
  */
  var num = e.target.value;

  /*
  if the last 4 chars equals '0663'... [?]
  ...extract the chars from num at start(0) 
  to the fourth to the last(-4 excluded)...[:]
  ...otherwise leave num alone
  */
  var mod = (num.substring(num.length - 4) === '0663') ? num.slice(0, -4) : num;

  // Set the value of <output> to the new value mod
  shp.labelScan.value = mod;
}

<form id='shipping'>
  <label for='trackingNumber'>Tracking Number:
  <input id='trackingNumber' type='number' min='100000000000' max='9999999999999999'> 12 to 16 digits</label><br>
  <output id='labelScan'></output>
</form>

Remove last four characters from form text input field

3 Answers3