CODEWITHSUNDEEP
javascriptjqueryhtmlmobile
cs-87
cs-87

Reputation: 216

Display number pad for user in html input fields when the type is text for mobile devices in the following special scenario

The following web page will be accessed from a mobile device. Currently I have added comma separators for number input fields, but I have to set the input type to text for the comma separation procedure. Doing so will show an alphanumeric keypad to the end user on the mobile browser. Is there a way to display a numeric keypad to the end user while performing the comma separation on input?

Method I tried for comma seperation

 $('input.number').keyup(function(event) {

    // skip for arrow keys
    if(event.which >= 37 && event.which <= 40) return;
  
    // format number
    $(this).val(function(index, value) {
      return value
      .replace(/\D/g, "")
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
      ;
    });
  });
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="f1qs3" class="form-control number" placeholder="Enter Value">

Upvotes: 2

Views: 654

Answers (2)

Alok Mali
Alok Mali

Reputation: 2881

Try input type tel for mobile devices

<input type="tel" id="f1qs3" class="form-control number" placeholder="Enter Value">

Upvotes: 3

Ashley
Ashley

Reputation: 917

You can add the pattern="\d*" attribute to your input:

<input type="text" id="f1qs3" class="form-control number" placeholder="Enter Value" pattern="\d*">

This should make a keypad appear on mobile devices and should not affect your comma separation method.

Upvotes: 2

Related Questions