javascript - 如何按从右到左的顺序使用按钮显示输入？

问题描述

我想在显示部分显示文本，其中通过按钮的输入向右对齐，当文本超过显示 div 的宽度时，它会溢出到左侧，即应该显示最新的输入。

但是当我开始输入特殊字符时就会出现问题。在控制台中输入正确显示，但在显示上，当输入其他字符时，顺序开始变得混乱。

是因为方向属性吗？

const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');


for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i].value)
  numbers[i].addEventListener('click', () => {
    console.log(display.innerText + `${numbers[i].value}`)
    display.innerText = display.innerText + `${String(numbers[i].value)}`;
  })
}

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

button {
  padding: 10px 18px
}

.operations button {
  margin-top: 5px;
  padding: 10px 15px;
}

.numbers {
  width: 80%;
  display: block;
  /* flex-direction; */
  /* justify-content: space-evenly; */
  align-items: center;
}

.container {
  border: 1px solid black;
  padding: 20px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* align-items: center; */
  margin: 7px 0;
}

.display {
  border: 1px solid black;
  width: 200px;
  height: 30px;
  margin: 10px;
  text-align: right;
  overflow: hidden;
  direction: rtl;
}

.butts {
  display: flex;
}

.operations {
  display: flex;
  margin-top: 2px;
  flex-direction: column;
  margin-left: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <div class="container">
    <div class="display" id='display'></div>
    <div class="butts">
      <div class="numbers">
        <div class="row">

          <button class="nums" value="1">1</button>
          <button class="nums" value="2">2</button>
          <button class="nums" value="3">3</button>
        </div>
        <div class="row">
          <button class="nums" value="4">4</button>
          <button class="nums" value='5'>5</button>
          <button class="nums" value='6'>6</button>
        </div>
        <div class="row">
          <button class="nums" value="7">7</button>
          <button class="nums" value="8">8</button>
          <button class="nums" value="9">9</button>
        </div>

        <div class="row">
          <button class="nums" value="0" style='width:55%'>0</button>
          <button classs="eqs" value="=" style='width:35%'>=</button>
        </div>
      </div>
      <div class="operations">



        <button class="nums" value="+">+</button>
        <button class="nums" value="a">a</button>


        <button class="nums" value="*">*</button>
        <button class="nums" value="/">/</button>




      </div>
    </div>
  </div>


</body>

</html>

标签： javascripthtmlcssdom

嗨，您需要放置一个带有方向的容器：rtl；并显示方向：ltr。附加沙箱中的工作代码

 .display-container{
      direction: rtl; 
      border: 1px solid black; 
      width: 200px;
      height: 30px;
      margin: 10px;
      overflow: hidden;
    }
    .display{
      white-space: nowrap; 
      direction: ltr; 
      display: inline-block;
      padding: 4px;
    }



 <div class="display-container">
    <span class="display" id="display"><span>
  </div>

https://codesandbox.io/s/stack-overflow-calculator-rtl-vs-ltf-cwhzi

javascript - 如何按从右到左的顺序使用按钮显示输入？

问题描述

解决方案

推荐阅读