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

admin管理员组

文章数量:1316323

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>

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>

• javascript
• html
• string
• clipboard
• paste

Share Improve this question Follow asked Aug 2, 2020 at 6:50 Abolfazl PanbehkarAbolfazl Panbehkar 70833 gold badges88 silver badges2222 bronze badges 6

• 3 Why are you setting the maxLength to 5 if you need more than that? – Rahul Bhobe Commented Aug 2, 2020 at 6:58
• @RahulBhobe this is a small piece of code from a bigger script, I need all of the string but the maxLength is neccessary – Abolfazl Panbehkar Commented Aug 2, 2020 at 7:02
• 1 Check the length in JavaScript – Adam Azad Commented Aug 2, 2020 at 7:03
• 1 Ideally, you cannot get the whole string by restricting the input to some limited length. So, if you can tell us what exactly you are trying to achieve with the entire string. It would be helpful – Dinesh Nadimpalli Commented Aug 2, 2020 at 7:09
• 1 OK - As far as I can tell the behavior you see is expected. There seems to be another answer posted that reads from the clipboard directly instead of the event - if that is what you want. – Rahul Bhobe Commented Aug 2, 2020 at 7:16

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 9

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.

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>

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>

本文标签：