Hi, could you help me please, if possible? From this page (saved page, the site is password protected), “N. inventario” field, I’m trying to read a barcode with a bar scanner, but only 2 of (maximum) 5 digits are read, see the video here. I haven’t got this problem from this other module, where numbers are correctly captured, probably because the left field hasn’t got a dropdown menu. Is it possible with a Chrome extension (TemperMonkey or Autofill) to conform the problematic field to the one of the other page? Would be great, thank you!
What’re you using to read the barcode? (The problem lies somewhere in how that software writes the data to the form; so without knowing what writes it, wont be able to help.)
The first thing I’d check is that the scanner is passing the correct data. The scanner I have simply sends the number so I can enter it in Excel to check it’s working. What happens if you scan the barcode to excel?
I assume it is a direct transfer when you click the barcode reader rather than a stored entry that is later downloaded.
My scanner is weird with stored data as when I output it I have to output to a certain version of excel or it throws out random numbers??
The scanner works absolutely well within the platform (as i wrote before the whole number is captured from this other module that hasn’t got a dropdown menu field) and with Excel and other external applications.
sorry missed that bit.
In your video it looks like the number entered has whitespace at the beginning. What happens if you remove the char limit on the field? does the full number get entered but with whitespace?
This is the maxlength set on the input (sorry I said Char limit when I meant this). Is this physically written in your code?
I don’t think it’s going to solve your overall problem but will be interesting to see if it is part of the problem.
In your web browser you should be able to right click and ‘inspect element’. You should then be able to click into the maxlength part and change the number. It’ll only work once for testing as your page reloads but it should hopefully show if the entire number is now being passed. Does it pass the entire number (with whitespace) if you increase the limit?
Okay. Using browser’s DevTools If I change maxlength=“9” to maxlength=“12”, the optican scanner properly reads the entire number and it works well. Now I’m wondering how to traduce it in an extension to make this change “definitive”.
Means the scan is injecting some nonprinting characters at the beginning of the string. I’m not sure what part of the extension tells the data to get pasted into the field, but it would need to trim (or substring/regex, it might depend on what characters are being put on the front of the string) the string first to shake off the extra bits.
Have you not considered using the “placeholder” attribute?
<label>
Barcode:
<input class="grid-5" placeholder="max length 12" name="inventario" maxlength="12">
</label>
how would “placeholder” help? All placeholder does is add some hint text to the field. Or am I missing something?
Glad you’ve got it working but i think there is something odd going on. This fix is just a bit of a work around as there shouldn’t be any reason additional characters are being added to the barcode entry, as they aren’t on the other example page. If you are happy using it as is that’s fine but just be aware that there may be issues down the line if something changes. e.g. you add/edit another form field next to this one.
I read the O.P.'s post which indicated that clicking
a button to display “maxlength” solved his problem.
This code…
<form action="#">
<label>
Barcode:
<input
class="grid-5"
placeholder="max length 12"
name="inventario"
minlength="12"
maxlength="12"
required
>
</label><br>
<input type="submit" value="go">
</form>
…will prevent submission until that criteria is met.
The Placeholder attribute has nothing to do with the problem. It would simply show the placeholder text in the field to the user.
The code you’ve just posted adds the ‘required’ attribute which would prevent the form from submitting until something was entered. I’m not sure I’d add the minlength attribute though as so far we don’t know why or what exactly is being added to the front of the barcode submission. If something changed to make the length of the barcode less than 12 (in your code) then it also wouldn’t submit but would be hard to know why.
Whilst changing the maxlength on the input means the form can be used I’m not sure it actually solves the problem as such as the additional characters are still being added to the barcode. But that is beyond my understanding.
Some barcodes do have whitespace characters in them, like spaces between numbers.
So if you had a max length of 9, expecting just 9 charaters to be scanned, but the code has a coulple of spaces in it, the scanner spits out 11 characters.
Well the form, on attempted submission, would supply this information…
Firefox
Chrome
The trouble is the problem the OP is experiencing is the addition of some unknown characters.
Let’s say the barcode is 9 char long and is adding 4 blank spaces in front. This would be fine for the min and max length of 12. But now for some reason only 3 blank spaces are added so we only have 11 characters. What is the user meant to do? add something to the begining? add something at the end?
If the original problem is sorted so the correct length barcode can be added reliably then min/max would be a useful addition but at the moment to me it is adding an extra variable into the system which will make debugging potentially harder.