Shorten text input field and copy to clipboard

Hi,
After some advice please.

I have an HTML form that a user enters a 22 character barcode into.

I need to be able to shorten this input by removing the 1st 5 characters and the last 3.

I would need a button on the form to shorten it and also copy to the clipboard.

I’m really new to this and any help would be appreciated,

Cheers!

Hi there,

Two links that might be useful to you

2 Likes

Thanks for the answer. I have now got it working. However, I am unsure of how to modify it slightly.

I have the text box that shortens the characters onchange. But I then have to click the button to get it to copy to the clipboard.

This is OK but how can I combine both together so I no longer have the button and when I enter the number into the box, it automatically runs the script to shorten the characters and copies at the same time?

<input onchange="remove(this.value)" type="text" id="mytext" />

    <button onclick="CopyFunction()">Copy Consignment No.</button>

      

    <script>

document.getElementById('mytext').focus();

function remove(val) {

    document.querySelector("#mytext").value = val.slice(6, -3);

}

function CopyFunction() {

  /* Get the text field */

  var copyText = document.getElementById("mytext");

  /* Select the text field */

  copyText.select();

  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */

  navigator.clipboard.writeText(copyText.value);

 

  /* Alert the copied text */

  alert("Copied the text: " + copyText.value);

}

    </script>

Does this trimming only happen when a 22 character barcode is entered?

e.g. shortened to what 14 characters? start = 5 end = 19
1234567890123456789012 onchange → 67890123456789

Or do you want it to trim from the 6th character (indexes start at 0, so index 5?) up to the 3rd from the end?

e.g. if I enter 01234567890 onchange → 567

Is ‘change’ the event you want to listen to? i.e. fires when clicking outside of the box after a change

I’m not sure I totally understand the brief here, but here is a codepen. It fires on change and copies to clipboard.

Note I have used addEventListener in javascript as opposed to inline onchange='...' in the html.

This works perfectly!

To explain a bit better, the original number would be for example:

ACF3 460120121553025001 and I needed to take off the 1st 6 characters and the last 3 - so would be
60120121553025

I changed your start and end to “6 and 20” and it works great!

One last question… Is there a way to clear result in the text box after it has copied?
This would be so that I don’t duplicate the number the next time I use the script?

Cheers.

Create another function that references document.getElementById(“mytext”); and inserts no value in it. So after the alert in your code above, call that function with this in it:

...
alert("Copied the text: " + copyText.value);

clearField;

}

function clearField() {
document.getElementById('mytext').innerHTML = '"";
}

Hi @Hayes7888

I have amended the codepen.

One last question… Is there a way to clear result in the text box after it has copied?

It is an input text box, so you can set it’s value to an empty string. e.g. barcodeBox.value = ''