javascript onkeypress ограничение символов при вставке - PullRequest
Новая
       20

javascript onkeypress ограничение символов при вставке

1 голос
/ 13 мая 2019

У меня есть текстовая область с keydown.trigger в Аурелии: 

<textarea name="description" keydown.trigger="handleKeypress($event, $event.target.value)" 
value.bind="desc" ></textarea>

В файле .js, тогда у меня есть этот код: 

handleKeypress(event,newValue) { 
  let max = 3413;
  let valueSize = new Blob([newValue]).size; 
  if (event.charCode >= 48 && event.charCode <= 57 || event.key === "Backspace") {
    return true;
  }
  else {
    event.onpaste = function(e){
        e.clipboardData.getData('text/plain').slice(0, max);
};
    if (valueSize>= max) {return false;} 
  }
  return true;
}

Так что это не должно допускать больше символов, чем 3413 байт в текстовой области, поскольку в БД у меня есть ограничения в байтах, поэтому я не могу использовать простую maxlength здесь.

Этот код работает нормально, он не позволяет вводить больше символов. Он также не позволяет вставлять текст с помощью сочетания клавиш CTRL + V, но только при достижении предела.

Проблема в том, что когда предел еще не достигнут и кто-то вставляет длинный текст с помощью сочетания клавиш CTRL + V или нажатия правой кнопки мыши. Затем содержимое вставляется, и в текстовой области он превышает допустимый предел.

Я хочу добиться, чтобы текстовое поле не показывало больше символов, чем предел

ОБНОВЛЕНИЕ: Я также пытался использовать упомянутое решение из другого потока через e.clipboardData.getData('text/plain').slice(0, max);

но это ничего не делает в моем случае.

1 Ответ

3 голосов
/ 13 мая 2019

в чем проблема с использованием maxlength?

Я пробовал, и он работает для меня: 

<template>
     <textarea name="description" maxlength.bind="max" value.bind="desc"></textarea>
</template>

А в viewmodel: 

export class Test {
  max = 3;
}

Я тестировалэто в codesandbox и работает нормально.Смотри https://codesandbox.io/embed/4zy4k5r3k7

...