HTML | Как оставлять фокус на элементе input при вводе символов с кнопок которые сделал сам

Question

Есть калькулятор, когда ввожу в него числа с клавиатуры, фокусировка следует за символами, а когда я ввожу числа с кнопок <div>Вводимая Цифра</div> у меня фокус не следует за вводимыми пользователем символами, и из-за этого у меня в поле input невозможно ввести много символов т.к не видно что вводишь, так сказать нету горизонтального скрола при вводе

let outputNumbers = document.querySelector('.output'),
  counterInsert = "";

function insertElem(num) {
  outputNumbers.value += num;
  // То что снизу забудь про это
  // counterInsert += num;
  // let counterInsertCheck = counterInsert.split("");
  // console.log(counterInsertCheck);
  // let counterLength = counterInsertCheck.length;
  // counterLength = counterLength - 1;
  // if( counterInsertCheck[counterLength] == "+" ||
  //     counterInsertCheck[counterLength] == "-" ||
  //     counterInsertCheck[counterLength] == "*" ||
  //     counterInsertCheck[counterLength] == "/") {
  //     counterLength = counterLength - 2;
  //     if( counterInsertCheck[counterLength] == "+" ||
  //         counterInsertCheck[counterLength] == "-" ||
  //         counterInsertCheck[counterLength] == "*" ||
  //         counterInsertCheck[counterLength] == "/") {
  //         counterLength = counterLength - 1;
  // outputNumbers.focus();
  // outputNumbers.value += counterInsertCheck[counterLength];
  //         } else {
  //             outputNumbers.value += num;
  //         }
  //     } else {

  //   }
}

function clearInput() {
  outputNumbers.value = "";
}

function clearOneElem() {
  let outputMinus = outputNumbers.value;
  let outputMinus2 = outputMinus.substring(0, outputMinus.length - 1);
  outputNumbers.value = outputMinus2;
  // console.log(outputMinus);
}

function mathOperation() {
  let splitNum = outputNumbers.value.split("");
  splitNum.forEach(function(item) {
    if (isNaN(parseFloat(item)) &&
      item != "+" &&
      item != "-" &&
      item != "*" &&
      item != "/" &&
      item != "(" &&
      item != ")") {
      // console.log("BAN");
      outputNumbers.value = "Error";
    } else {
      // console.log("GOOD");
      // console.log(outputNumbers.value);
    }
  });
  if (outputNumbers.value == "Error") {
    outputNumbers.value = "Error";
  } else {
    let og = eval(outputNumbers.value);
    if (og == Infinity) {
      outputNumbers.value = "";
    } else {
      // console.log("-------------------");
      // console.log(outputNumbers.value);
      // console.log(og);
      outputNumbers.value = og;
    }
  }
}
document.addEventListener('keydown', function(event) {
  if (event.code === "Enter") {
    return mathOperation();
  }
});

* {
  box-sizing: border-box;
}

.wrapper {
  width: 302px;
  height: 360px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-right: 1px solid black;
}

.output {
  padding: 10px 15px 0px;
  width: 100%;
  height: 60px;
  position: relative;
  border: 2px solid black;
  border-right: 1px solid black;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 32px;
  text-align: right;
  overflow: auto;
  outline: none;
}

.elem {
  width: 75px;
  height: 60px;
  border: 1px solid black;
  border-top: none;
  border-right: none;
  position: relative;
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 26px;
  cursor: pointer;
  user-select: none;
}

.elem:hover {
  background-color: #efefef;
}

.elem-img {
  width: 40%;
}

.elem-yellow {
  background-color: #f8d314;
}

.elem-yellow:hover {
  background-color: #ebca17;
}

<!doctype html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Calculator</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="wrapper">
    <input type="text" class="output" placeholder="0">
    <div class="elem" onclick="clearInput();">AС</div>
    <div class="elem" onclick="insertElem('(');">(</div>
    <div class="elem" onclick="insertElem(')');">)</div>
    <div class="elem elem-yellow" onclick="clearOneElem();">&lArr;</div>
    <div class="elem" onclick="insertElem('7');">7</div>
    <div class="elem" onclick="insertElem('8');">8</div>
    <div class="elem" onclick="insertElem('9');">9</div>
    <div class="elem elem-yellow shareBtn" onclick="insertElem('/');">&divide;</div>
    <div class="elem" onclick="insertElem('4');">4</div>
    <div class="elem" onclick="insertElem('5');">5</div>
    <div class="elem" onclick="insertElem('6');">6</div>
    <div class="elem elem-yellow multiplyBtn" onclick="insertElem('*');">&times;</div>
    <div class="elem" onclick="insertElem('1');">1</div>
    <div class="elem" onclick="insertElem('2');">2</div>
    <div class="elem" onclick="insertElem('3');">3</div>
    <div class="elem elem-yellow minusBtn" onclick="insertElem('-');">-</div>
    <div class="elem" onclick="insertElem('.');">.</div>
    <div class="elem" onclick="insertElem('0');">0</div>
    <div class="elem" onclick="mathOperation();">=</div>
    <div class="elem elem-yellow plusBtn" onclick="insertElem('+');">+</div>
  </div>
  <script src="js/script.js"></script>
</body>

</html>

Answer 1

Добавьте outputNumbers.focus(); в функцию insertElem.

let outputNumbers = document.querySelector('.output'),
    counterInsert = "";

function onClick(e) {
  if (e.target.classList.contains('elem')) {
    e.preventDefault();
  }
}

function insertElem(num, e) {
    outputNumbers.value += num;
    
    outputNumbers.blur();
    outputNumbers.focus();
}

function clearInput() {
    outputNumbers.value = "";
}

function clearOneElem() {
    let outputMinus = outputNumbers.value;
    let outputMinus2 = outputMinus.substring(0, outputMinus.length-1);
    outputNumbers.value = outputMinus2;
}

function mathOperation() {
    let splitNum = outputNumbers.value.split("");
    splitNum.forEach(function(item) {
        if (isNaN(parseFloat(item))
            && item != "+"
            && item != "-"
            && item != "*"
            && item != "/"
            && item != "("
            && item != ")") {
            outputNumbers.value = "Error";
        } 
    });
    if(outputNumbers.value == "Error") {
        outputNumbers.value = "Error";
    } else {
        let og = eval(outputNumbers.value);
        if (og == Infinity) {
            outputNumbers.value = "";
        } else {
            outputNumbers.value = og;
        }
    }
}
document.addEventListener('keydown', function(event) {
    if(event.code === "Enter") {
        return mathOperation();
    }
});

document.onmousedown = onClick;

* {
    box-sizing: border-box;
}
.wrapper {
    width: 302px;
    height: 360px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-right: 1px solid black;
}
.output {
    padding: 10px 15px 0px;
    width: 100%;
    height: 60px;
    position: relative;
    border: 2px solid black;
    border-right: 1px solid black;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 32px;
    text-align: right;
    overflow: auto;
    outline: none;
}
.elem {
    width: 75px;
    height: 60px;
    border: 1px solid black;
    border-top: none;
    border-right: none;
    position: relative;
    font-family: "Roboto", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 26px;
    cursor: pointer;
    user-select: none;
}
.elem:hover{
    background-color: #efefef;
}
.elem-img {
    width: 40%;
}
.elem-yellow {
    background-color: #f8d314;
}
.elem-yellow:hover {
    background-color: #ebca17;
}

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculator</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <input type="text" class="output" placeholder="0">
    <div class="elem" onclick="clearInput();">AС</div>
    <div class="elem" onclick="insertElem('(');">(</div>
    <div class="elem" onclick="insertElem(')');">)</div>
    <div class="elem elem-yellow" onclick="clearOneElem();">&lArr;</div>
    <div class="elem" onmousedown="insertElem('7');">7</div>
    <div class="elem" onclick="insertElem('8');">8</div>
    <div class="elem" onclick="insertElem('9');">9</div>
    <div class="elem elem-yellow shareBtn" onclick="insertElem('/');">&divide;</div>
    <div class="elem" onclick="insertElem('4');">4</div>
    <div class="elem" onclick="insertElem('5');">5</div>
    <div class="elem" onclick="insertElem('6');">6</div>
    <div class="elem elem-yellow multiplyBtn" onclick="insertElem('*');">&times;</div>
    <div class="elem" onclick="insertElem('1');">1</div>
    <div class="elem" onclick="insertElem('2');">2</div>
    <div class="elem" onclick="insertElem('3');">3</div>
    <div class="elem elem-yellow minusBtn" onclick="insertElem('-');">-</div>
    <div class="elem" onclick="insertElem('.');">.</div>
    <div class="elem" onclick="insertElem('0');">0</div>
    <div class="elem" onclick="mathOperation();">=</div>
    <div class="elem elem-yellow plusBtn" onclick="insertElem('+');">+</div>
</div>
    <script src="js/script.js"></script>
</body>
</html>

БЛОГ НА HUSL

HTML | Как оставлять фокус на элементе input при вводе символов с кнопок которые сделал сам

Ответы (1 шт):