1

I am having an issue with numeric inputs on payment forms. When users enters a dollar sign ($) into numeric inputs in Chrome, Chrome simply blocks the $. However, when users enters a $ in Safari, Safari highlights the error (outlines the input box in red), but allows the $ to persist. Then, when the user tries to submit the form, the form resets instead of submitting and confuses the user.

Is there a way to replicate the behavior in Chrome in Safari (simply block the $ but allow the user to keep typing)? Or alternatively, is there a way to allow the use of the $ and allow the form to submit?

Weirdly, I can't seem to find any info on this although it seems like it would be a common problem for folks using payment forms.

bad_juju
  • 47
  • 2
  • 9

1 Answers1

1

You could use Javascript / JQuery to only allow specific characters (eg. 0-9). 

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
// Remove invalid characters
var sanitized = $(this).val().replace(/[^0-9]/g, '');
// Update value
$(this).val(sanitized);
});

Source: Disable Text Entry in <input type="number">

Tell me how you get on and we can try figure something out if that doesn't work. I do recommend looking at the source I linked if it doesn't as there's a few alternatives but there are other ways to get around the specific issue of not allowing a user to enter the '$' character.

Community
  • 1
  • 1
Liam Macmillan
  • 388
  • 1
  • 5
  • 13