как отображать ввод с помощью кнопки справа налево? - PullRequest
Новая
       5

как отображать ввод с помощью кнопки справа налево?

2 голосов
/ 13 июля 2020

Я хочу отобразить текст в разделе отображения, где ввод с помощью кнопок выровнен по правому краю, и когда текст превышает ширину отображаемого div, он переполняется влево, ie самые последние вводы должен отображаться.

, но проблема возникает, когда я начинаю вводить специальные символы. В консоли ввод отображается правильно, по порядку, но на дисплее порядок начинает перемешиваться, когда вводятся другие символы.

это из-за свойства direction? 

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>

Ответы [ 5 ]

6 голосов
/ 23 июля 2020

Привет, тебе нужно поставить контейнер с direction: 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

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

6 голосов
/ 17 июля 2020

Проблема должна быть такой же простой, как удаление direction: rtl; от вас CSS.

Ссылка на Codesandbox

2 голосов
/ 24 июля 2020

Помимо удаления direction: rtl, как насчет использования скрытого контейнера overflow и прослушивателя CustomEvent, который переместит самый старый символ с дисплея в контейнер из поля зрения при достижении определенный порог символов или ширины (может быть какой угодно)?

Таким образом вы получите точный контроль над переполнением (обратите внимание, что это не нестандартное событие «переполнение» , если вас беспокоят коллизии, просто назовите его по-другому) и возможность выполнять другие действия.

Подход имеет дополнительное преимущество в том, что его можно легко расширить с помощью «backspace» ", поскольку все символы переполнения могут быть помещены обратно в display путем инвертирования операции. 

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

const overflow = document.querySelector("#overflow");

display.addEventListener("overflow", ({
  detail: {
    oldest
  }
}) => {
  overflow.innerText += oldest
});

for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener('click', () => {
    const {
      innerText
    } = display;

    const chars = innerText.split(""); //allowed as you use a strict subset of characters;

    chars.push(numbers[i].value);

    if (chars.length > 23) { //configure length to your liking
      const eventInit = {
        detail: {
          oldest: chars.shift()
        }
      };

      const overEvent = new CustomEvent("overflow", eventInit);

      display.dispatchEvent(overEvent);
    }

    display.innerText = chars.join("");
  });
}
* {
  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;
  align-items: center;
}

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

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 7px 0;
}

.overflow {
  display: none;
}

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

.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="overflow" id="overflow"></div>
    <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>
1 голос
/ 24 июля 2020 

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: ltr;
}

.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>

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>
0 голосов
/ 23 июля 2020

Вы можете изменить направление текста с помощью LTR и RTL источник

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...