Learn html, css, javascript online and how to make a webpage design

Input number only show number keyboard on mobile browser.

Wednesday 6th of January 2021 03:58:01 PMhtml

Sometimes we design a digital input frame that works on the website and wants to display it on the browsers of mobile devices but the problem is when we are using mobile devices and focus on the input box, the keyboard frame displays both letters and numbers. So how to make the keyboard frame on mobile devices when displayed only in digital format. Take a look at the example below for :

The limit to only displaying numbers on the keypad of mobile devices

<!DOCTYPE html>
<html>
<head>
    <title>Input only show number on keyboard mobile browser - HtmlcssDownload.com</title>
    <style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box .form-control{width: 100%;height: 40px;margin-bottom: 20px;}
        .box .form-control input{width: 100%;max-width: 100%;height: 100%;background: none;outline:none;border:1px solid #e1e1e1;display: flex;padding:5px 10px;box-sizing: border-box;border-radius: 4px;}
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <div class="title">Input only show number on keyboard mobile browser</div>
        <div class="form-control">
            <input type="number" pattern="[0-9]*" inputmode="numeric" />
        </div>
    </div>
</div>
    
</body>
</html>

 

We are Recommending you: