How to make this number field in contact form work

Highlighted
Explorer
96 0 4

Using debut. I'm customizing the contact form. I'm looking to make a number form field customers can edit. I'd like this number field to have a permanent decimal point they can edit numbers to the left or right of. This works seamlessly on desktop where customers can use the keyboard and mouse pointer to increase or decrease the number, but the mobile version is not so seamless. This is my code thus far:

<label for="ContactFormPrice">Price</label>
<input class="form-control" type="number" id="ContactFormPrice" name="contact[Price]" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00">
<script>
    function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };
  </script>

 

The problem: 0.00

On mobile if a customer wants to enter 50, they can't simply tap the first 0 and type 50. If they do this, it ads 5.00.  To get 50.00, customer must tap the first 0, type 0, then tap it again, and type 5.

Is there a better way so this number field can be edited on mobile more seamlessly.

 

0 Likes