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>
Share
Improve this question
asked Aug 2, 2020 at 6:50
Abolfazl PanbehkarAbolfazl Panbehkar
7083 gold badges8 silver badges22 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
3 Answers
Reset to default 9Consider 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>
本文标签:
版权声明:本文标题:javascript - How to get all of the pasted string, in input which has a maxLength attribute? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742001961a2411195.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论