Не работает ограничение на вывод кол-ва символов в калькуляторе

Question

Не работает ограничение на вывод кол-ва символов в калькуляторе. Для примера прописал 3 символа, но оно не срабатывает.

 <input class="input" type="text" readonly v-bind:value="displayValue" :maxlength="3">

Vue.createApp({
  data() {
    return {
      item: ['-', 9, 8, 7, '+', 6, 5, 4, '.', 3, 2, 1, 0, '*', '/'],
      displayValue: '',
    };
  },
  methods: {
    buttonShow(num) {
        this.displayValue += num;
    },
    clear() {
      this.displayValue = '';
    },
    calc() {
        this.displayValue = Math.floor(eval(this.displayValue) * 100) / 100;
    },
    back() {
      if (this.displayValue) {
        this.displayValue = this.displayValue.substring(
          0,
          this.displayValue.length - 1
        );
      }
    },
    percent() {
      this.displayValue = this.displayValue / 100;
    },
  },
}).mount('#app');

[v-cloak] { 
   display: none;
}

.grid{ 
   max-width: 360px;
   margin: 50px auto;
   padding: 20px;
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(4, 1fr);
   background-color: #233244;
   user-select: none;

}

.item {
   padding: 15px;
   border: none;
   color: white;
   font-size: 28px;
   background-color: #31455e;
   cursor: pointer;
   transition: .3s ease-in;
}

.item:hover{
   transform: scale(1.05);
   background-color: turquoise;
}

.input {
   background-color: #31455e;
   grid-column: 1/-1;
   height: 50px;
   outline: none;
   text-align: right;
   padding-right: 10px;
   font-size: 28px;
   color: white;
}

.equally{
   grid-column: 4/-1;
   grid-row: 5/7;
}

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

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Calculator</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id='app' v-cloak>
      <div class="grid">
         <input class="input" type="text" readonly v-bind:value="displayValue" :maxlength="3">
         <button class="item" @click="clear()">C</button>
         <button class="item back" @click="back()">&loarr;</button>
         <button class="item" @click="percent()">%</button>
         <button class="item" v-for="i of item" @click="buttonShow(i)">{{i}}</button>
         <button class="item equally" id='equally' @click="calc()">=</button>
      </div>
   </div>
   <script src="https://unpkg.com/vue@next"></script>https://ru.stackoverflow.com/questions/ask#
   <script src="main.js"></script>
</body>

</html>

Answer 1

Атрибут maxlength действует только на ввод пользователем (вручную).
Программное присваивание значения value (скриптом) - игнорирует заданное атрибутом maxlength ограничение.

Для проверки:

const [inp, btn] = ['#inp', '#btn'].map(s => document.querySelector(s));
btn.addEventListener('click', evt => {
  inp.value = 'Lorem ipsum';
});

<p>Попробуйте вручную ввести значение длиннее 4 символов, а затем нажмите кнопку для программного ввода:</p>
<input id="inp" maxlength="4">
<button id="btn">Присвоить input.value строку длиной 11 символов</button>

Когда значение присваивается из скрипта, обрезать строку до необходимой длины можно методами String, substring или slice:

const str = 'Lorem ipsum';
inp.value = str.substring(0, 4);  // 'Lore'

Ну а в Vue-экземпляре, можно описать вычисляемое свойство которое будет возвращать обрезанную до заданной длины строку, с реактивным обновлением:

computed: {
  croppedDisplayValue() {
    return this.displayValue.slice(0, 4);
  },
  // ...
},

БЛОГ НА HUSL

Не работает ограничение на вывод кол-ва символов в калькуляторе

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