Создаю формочку для мобильного приложения на HTML. Несколько полей цифровые. Как задать для них цифровую клавиатуру?
Если тип Number, то такая клавиатура
а нужна такая:
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуТоже нужна была своя клавиатура.
Писал для своих нужд, может и вам подойдет.
Для предпросмотра снизу нажмите на → Выполнить код
, потом →
На всю страницу
var Q;
Q = {};
Q.timeInterval;
Q.flag = 0;
function timeIntervaStart() {
if (Q.flag === 0) {
Q.timeInterval = setTimeout(function() {
Clear();
timeIntervaStart();
Q.flag = 1;
}, 300);
} else if (Q.flag === 1) {
Q.timeInterval = setTimeout(function() {
Clear();
Q.flag = 2;
timeIntervaStart();
}, 150);
} else {
Q.timeInterval = setTimeout(function() {
Clear();
timeIntervaStart();
}, 50);
}
}
window.onmousedown = function() {
var elem = window.event.srcElement;
if (elem.parentNode.id === 'klava') {
if (elem.innerHTML === '←') {
timeIntervaStart();
}
}
};
window.onmouseup = function() {
var elem = window.event.srcElement;
if (elem.parentNode.id === 'klava') {
if (elem.innerHTML === '←') {
clearTimeout(Q.timeInterval);
Q.flag = 0;
}
}
};
window.onclick = function() {
var elem = window.event.srcElement;
if (elem.parentNode.id === 'klava') {
if (elem.innerHTML === '←') {
Clear();
} else {
document.getElementById('input_data').value += elem.innerHTML;
}
}
};
function Clear() {
var str = document.getElementById('input_data').value;
document.getElementById('input_data').value = str.substring(0, str.length - 1);
}
*{box-sizing:border-box;outline: 0;font-family: Consolas;}
#klava {
width: 100%;
background-color: #edeef0;
padding: 5px 0px 5px 0px;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
}
#klava button {
width: 100px;
height: 50px;
background-color: #fff;
border: none;
text-align: center;
margin: 4px;
cursor: pointer;
border-radius: 8px;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
}
#klava .back-sp {
background-color: #4286f5;
color: #fff;
}
#input_data {
background-color: #ffffeb;
border: 1px solid #c9c9c9;
padding: 5px;
border-radius: 4px;
}
#klava button, #input_data {
font-size: 30px;
line-height: 30px;
}
#klava button:active {
background-color: #FFB74D;
}
<input id="input_data" type="text" onfocus="this.blur();">
<div id="klava">
<button>1</button><button>2</button><button>3</button><br>
<button>4</button><button>5</button><button>6</button><br>
<button>7</button><button>8</button><button>9</button><br>
<button>00</button><button>0</button><button class="back-sp">←</button><br>
</div>
<input type="number">
не продходит вам?<input type="tel">