Автофокус на нажатие клавиш
Я создал один простой калькулятор, который содержит одно поле ввода и клавиатуру. Я хочу, чтобы поле ввода в калькуляторе было в фокусе при нажатии любой клавиши на клавиатуре. Я не могу сделать это.
Итак, мой вопрос:
Как мне сфокусировать поле ввода в моем калькуляторе при нажатии любой клавиши или кнопки калькулятора.
Я предоставил свой полный код ниже.
function calculator(num) {
document.calc.demo.value = document.calc.demo.value + num;
}
function back() {
var value = document.getElementById("demo").value;
document.getElementById("demo").value = value.substr(0, value.length - 1);
}
document.querySelector("input").addEventListener("keypress",
function(e) {
var allowedChars = '0123456789.+-/%*';
function contains(stringValue, charValue) {
return stringValue.indexOf(charValue) > -1;
}
var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key) ||
e.key === '.' && contains(e.target.value, '.');
invalidKey && e.preventDefault();
});
focusMethod = function getFocus() {
document.getElementById("demo").focus();
}
.calculator {
margin: 0 auto;
display: block;
width: 184px;
border: 4px solid grey;
padding: 10px 10px 0px;
background: aliceblue;
position: relative;
}
.color1 {
background: skyblue;
}
.plus {
height: 76px!important;
position: absolute;
bottom: 16px;
}
h2 {
text-align: center;
}
input[type=text] {
width: 100%;
text-align: right;
}
input[type=button],
input[type=reset] {
width: 43px;
height: 33px;
margin-top: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
padding: 0;
}
<html>
<head>
<title>calc-2</title>
</head>
<body>
<h2>Javascript Calculator</h2>
<div class="calculator">
<form name="calc">
<input type="text" id="demo" autofocus>
<ul>
<li>
<input type="reset" value="C" class="color1" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="←" class="color1" onclick="back(),focusMethod()">
</li>
<li>
<input type="button" value="%" class="color1" onclick="calculator(this.value),focusMethod()">
</li>
<li>
1. List item
<input type="button" value="/" class="color1" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="7" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="8" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="9" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="*" onclick="calculator(this.value),focusMethod()" class="color1">
</li>
<li>
<input type="button" value="4" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="5" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="6" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="-" onclick="calculator(this.value),focusMethod()" class="color1">
</li>
<li>
<input type="button" value="1" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="2" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="3" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="+" onclick="calculator(this.value),focusMethod()" class="color1 plus">
</li>
<li>
<input type="button" value="." onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="0" onclick="calculator(this.value),focusMethod()">
</li>
<li>
<input type="button" value="=" onclick="calc.demo.value=eval(calc.demo.value),focusMethod()">
</li>
</ul>
</form>
</div>
</body>
</html>