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 ``, so without it is impossible. — Marcos Pérez Gude, Jun 29 '16 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, Jun 30 '16 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, Jun 30 '16 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, Jun 30 '16 at 10:38
Possible duplicate of [Spring form:input for number](http://stackoverflow.com/questions/27141458/spring-forminput-for-number) — Marcos Pérez Gude, Jun 30 '16 at 10:39
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/spring-form-tld.html see this link — achu, Jun 30 '16 at 10:46
Spring is a very bad framework to make websites. If you can't have control of your elements, something wrong or old is making. I suggest to you if you need a input type=number don't render through that framework, render it with direct HTML. Or set a special classname and then with javascript, detect it and replace the type. — Marcos Pérez Gude, Jun 30 '16 at 10:56
Well, so sorry, but your only option is javascript, or change the framework... It's because this things that most java developers use java for the models and then the controllers and the views in javascript (backbone, angular, etc). Because develop webpages in java is ilogical. — Marcos Pérez Gude, Jun 30 '16 at 11:01
I will answer with a javascript solution, but is a trick, not the correct way. — Marcos Pérez Gude, Jun 30 '16 at 11:02

score 1 · Answer 1 · answered Jun 30 '16 at 11:05

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.

If i replace the input type spring framework will not accept the form.. — achu, Jun 30 '16 at 11:47
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! — Marcos Pérez Gude, Jun 30 '16 at 11:53

Enable the number keyboard in touch device without using input types

1 Answers1