Enable the number keyboard in touch device without using input types

Question

I want to trigger the number keypad, email keypad and tel keypad in all touch devices without using any input types.

<input type="text" value="" class="text-box number">
<input type="text" value="" class="text-box email">
<input type="text" value="" class="text-box tel">

if it possible through jquery also fine.

You need a type="number" so finally, even if you make it with javascript, you'll obtain a <input type="number">, so without it is impossible. — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Jun 29, 2016 at 13:29
Thank for ur reply, but i am using java spring MVC in that input type text only allowed. If any other possibility to do that. — achu
– achu, Commented Jun 30, 2016 at 10:28
Are you sure you can't set the type of an input? you can set several values: type="text|hidden|number|checkbox|radio|date|color" and a large etc. If your framework doesn't allow to set an attribute for a tag, throw the framework to the trash, it's a crap. — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Jun 30, 2016 at 10:30
Yes i am sure, we can set type="text|hidden|checkbox|radio|" but we can't set number or email and tel — achu
– achu, Commented Jun 30, 2016 at 10:38

Marcos Pérez Gude · Accepted Answer · 2016-06-30 11:05:43Z

1

Due our comments in the main post, the only choice is javascript.

According with your original HTML:

<input type="text" value="" class="text-box number">
<input type="text" value="" class="text-box email">
<input type="text" value="" class="text-box tel">

I can make some changes (for example, add a data-type custom attribute, see the following HTML) and then the javascript block:

$(document).ready(function() {
  
  // iteration through all elements that matches
  $('.text-box[data-type]').each(function() {
    //replace the type
    $(this).attr('type', $(this).attr('data-type')); 
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" value="" data-type="number" class="text-box">
<input type="text" value="" data-type="email" class="text-box">
<input type="text" value="" data-type="tel" class="text-box">

This will not work in IE9 or less since it doesn't allow to change dynamically the type of an input, but in the rest of browsers it will work perfectly.

answered Jun 30, 2016 at 11:05

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

achu Over a year ago

If i replace the input type spring framework will not accept the form..

Marcos Pérez Gude Over a year ago

So with spring framework is impossible to have a type number, so in mobile the keyboard will be always the normal text keyboard, and will not adapt to the correct behaviour (number, email, datepicket, etc). My suggestion is still change the framework. Java + web is an invention that was maded wrong in concept and in behaviour. Java is not bad, but for web is the worst technology you can use. Good luck!

Collectives™ on Stack Overflow

Enable the number keyboard in touch device without using input types

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related