从表单文本输入字段中删除最后四个字符

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?

Answer 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">

Answer 2

Here:

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

Answer 3

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 (ie <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>