Как получить всю вставленную строку на входе с атрибутом maxLength? - PullRequest
Новая
       103

Как получить всю вставленную строку на входе с атрибутом maxLength?

10 голосов
/ 02 августа 2020

Мне нужно получить всю вставленную строку на входе с атрибутом maxLength.

Но в событии onpaste нет свойства для получения всей вставленной строки.

Например, проверьте фрагмент ниже с этой строкой:

"AAAAA-BBBBB-BBBBB-BBBBB-BBBBB"

Результат: «AAAAA»

Но мне нужно все строки. 

const onPasteFn = (e) => {
  setTimeout(() => document.getElementById("demo").innerHTML = e.target.value, 0)
}
<input type="text" maxLength="5" onpaste="onPasteFn(event)" />

<p id="demo"></p>

Ответы [ 3 ]

8 голосов
/ 02 августа 2020

Рассмотрите возможность использования clipboardData из события, где вы можете использовать getData(), чтобы захватить текст, который был вставлен из буфера обмена, например: 

const onPasteFn = (e) => {
  document.getElementById("demo").innerHTML = (e.clipboardData || window.clipboardData).getData('text');
}
<input type="text" maxLength="5" onpaste="onPasteFn(event)" />

<p id="demo"></p>

См. Пример здесь из документации. Обратите внимание, что резервный вариант || window.clipboardData используется для поддержки IE.

2 голосов
/ 02 августа 2020

Вы можете получить доступ к clipboardData через функцию getData() и распечатать его вместо e.target.value(). Если вы сохраните его во временной переменной, как это сделал я в моем примере, вы сможете выполнить дальнейшую проработку вставленной строки. пример FF 22 + ). 

const onPasteFn = (e) => {
  var myData = e.clipboardData.getData("text/plain");
  
  setTimeout(() => document.getElementById("demo").innerHTML = myData, 0)
}
<input type="text" maxLength="5" onpaste="onPasteFn(event)" />

<p id="demo"></p>
0 голосов
/ 02 августа 2020

Установите более высокое значение maxLength, если ожидается, что вставленная строка будет больше. Длина вашей примерной входной строки 29. Итак, вот модифицированный код с maxLength=30. 

const onPasteFn = (e) => {
  setTimeout(() => document.getElementById("demo").innerHTML = e.target.value, 0)
}
<input type="text" maxLength="30" onpaste="onPasteFn(event)" />

<p id="demo"></p>
...