1

Создаю формочку для мобильного приложения на HTML. Несколько полей цифровые. Как задать для них цифровую клавиатуру?

Если тип Number, то такая клавиатура

введите сюда описание изображения

а нужна такая:

введите сюда описание изображения

5
  • 1
    <input type="number"> не продходит вам? 6 мар 2016 в 8:42
  • как-то не совсем так работает
    – sitev_ru
    6 мар 2016 в 9:05
  • ну вы либо укажите, как вы хотите, чтобы оно работало, либо вопрос останется без ответа.
    – lexxl
    6 мар 2016 в 12:43
  • подредактировал вопрос...
    – sitev_ru
    6 мар 2016 в 14:29
  • 1
    мне кажется, вам нужна клавиатура не для ввода данных в инпут, а для совершения звонка. для этого служит <input type="tel">
    – lexxl
    6 мар 2016 в 18:59

1 ответ 1

2

Тоже нужна была своя клавиатура.
Писал для своих нужд, может и вам подойдет.
Для предпросмотра снизу нажмите на → Выполнить код, потом → На всю страницу

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.