14

We have seen when input type "Text" selected on mobile keyboard it comes up with text, when input type "number" selected on mobile keyboard it comes up with numbers only. And when input type password fields are selected then it comes up with both alphabet and numbers. Is there any way to show both alphabet and numbers on keyboard when input field are not password, rather plain text??

Like this

Hope you got my query. Thanks.

Touhidul Alam
  • 321
  • 2
  • 11
  • Use the `type=tel` it shows numbers with letters. – vamsikrishnamannem Jun 06 '16 at 07:24
  • i understand how "tel" input works, but i wanted a bit smoother, i have edited the main posts, this keyboards were shown when pressed password field, is it possible like this for normal input also? – Touhidul Alam Jun 06 '16 at 07:38
  • There is a plugin called jQKeyboard. It should provide you with the UI you are looking to create. http://www.jqueryscript.net/other/Responsive-Virtual-Keyboard-Plugin-With-jQuery-jQKeyboard.html – user1725382 Jul 18 '16 at 15:23
  • Thanks. Becoming hopeful, but if i try this on mobile , it opens up normal default keyboard and underneath this built keyboard. – Touhidul Alam Jul 21 '16 at 06:25

4 Answers4

0

Try:

<input type="password" pattern="[0-9]*" inputmode="numeric">

Before html5.1 via css:

 input[type=number] {
    -webkit-text-security: disc;
}
Mantas
  • 1
0
<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

This should work too, using type="number".

tdy
  • 36,675
  • 19
  • 86
  • 83
Paul
  • 11
  • 2
0
<input type="text">
<input type="url">

Try this input types it will show both number and text

Venkatesh Babu
  • 11
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 10 '23 at 00:19
-4

Please see this example for different kinds of keyboard inputs on mobile devices.

The keyboard that is closest to your wishes is probably the 'password' keyboard:

<input type="password">

J. Timmerman
  • 30
  • 3