Shorten text input field and copy to clipboard

JavaScript
1

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!

3

Hi there,

Two links that might be useful to you

2 Likes
4

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>
5

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.

6

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.

7

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 = '"";
}
8

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 = ''

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.