CODEWITHSUNDEEP
javascripthtmlstringclipboardpaste
Abolfazl Panbehkar
Abolfazl Panbehkar

Reputation: 708

How to get all of the pasted string, in input which has a maxLength attribute?

I need to get all of the pasted string in input which has a maxLength attribute.

But in 'onpaste' event there is no property to get all of the pasted string.

For example, check below snippet with this string:

"AAAAA-BBBBB-BBBBB-BBBBB-BBBBB"

The output is : "AAAAA"

But I need all of the string.

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

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

Upvotes: 11

Views: 2081

Answers (3)

Nick Parsons
Nick Parsons

Reputation: 50759

Consider using clipboardData from the event, where you can use getData() to grab the text that was pasted from the clipboard like so:

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

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

See example here from the docs. Note that the fallback of || window.clipboardData is used for IE support.

Upvotes: 9

Roberto Caboni
Roberto Caboni

Reputation: 7490

You can access clipboardData through function getData(), and print it instead of e.target.value(). If you store it in a temporary variable, like I did in my example, you are able to perform further elaboration on the pasted string.

It works for reasonably recent versions of browsers (for example 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>

Upvotes: 2

Rahul Bhobe
Rahul Bhobe

Reputation: 4451

Set a higher maxLength if the pasted string is expected to be larger. Your sample input string has length 29. So here is modified code with 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>

Upvotes: 0

Related Questions