Unfriendly: pasted punctuation in Number fields blanks the field

In my app, it’s common for users to paste formatted values in from PDF or other sources. Thus, a number field may receive spaces, a dollar sign, and/or comma, in addition to the digits, sign, and decimal point. These “illegal” characters display just fine, giving no warning of what’s about to happen.

The problem: when they then finalize the entry (e.g., tab/mouse to another location, or press Enter), the field goes blank.

In a numeric field, there is no way to detect this. There is no event that triggers on paste. Even if there was, the text member is now of type Number, and the actual “text” is not accessible. We can’t detect the “bad” characters in order to filter them out.

If this was a text field, we could do that. But then, on mobile, the wrong keyboard would pop up.

Any suggestions for how to make Copy/Paste user-friendly?

I think this a problem with the html implementation of a number input field.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_number

Do you have an example of the type of characters that break? I tried with dollar signs commas and spaces and this happened :slightly_smiling_face: maybe it’s a chrome thing…

vuVqnFow34

A paste event might work well for this - that way you could amend the pasted text into the number the user expects - I think you’ll need to go into the realms of js/jQuery though.

https://kuyeduwu.github.io/2018/01/30/jQuery-paste-event/

Using the methods described here

Select specific component with javascript

A working proof of concept clone link:
https://anvil.works/build#clone:FYJES37N52DHXSWC=XP66UGZSE3IJY3RABOJ3WD5G

1 Like

Thanks for looking at this.

I’m using Firefox and Windows 10.

I really need to study this low-level stuff. Your example will help a lot, I’m sure. I’ll let you know how it works out.

On reflection, copy/paste is certainly one way bad characters can get in, but not the only way. No one is immune to typos. (Just place your fingers one key off [left, right, up, down] by mistake…) And displayed keyboards can be finicky, too, especially on small screens.

In general, then, I suppose there should be a way to prevent unacceptable characters in the first place, regardless of source. Failing that, a way to remove them before converting to a number.