Facebook's status update input (well, contenteditable div) detects links.
When typing a link it waits until the spacebar is pressed before fetching the URL.
When pasting a link it fetches the URL instantly.
I can already parse the url after the spacebar is pressed...but I'm not sure about detecting when content is pasted.
Any solution would be awesome; a jQuery formatted solution will be BEST!
Facebook's status update input (well, contenteditable div) detects links.
When typing a link it waits until the spacebar is pressed before fetching the URL.
When pasting a link it fetches the URL instantly.
I can already parse the url after the spacebar is pressed...but I'm not sure about detecting when content is pasted.
Any solution would be awesome; a jQuery formatted solution will be BEST!
Share Improve this question asked Dec 11, 2009 at 22:01 David MurdochDavid Murdoch 89.3k39 gold badges152 silver badges192 bronze badges8 Answers
Reset to default 10 Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.Modern day browsers support onpaste:
<!DOCTYPE html>
<html>
<head>
<title>onpaste event example</title>
</head>
<body>
<h1>Play with this editor!</h1>
<textarea id="editor" rows="3" cols="80">
Try pasting text into this area!
</textarea>
<script>
function log(txt) {
document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
}
function pasteIntercept(evt) {
log("Pasting!");
}
document.getElementById("editor").addEventListener("paste", pasteIntercept, false);
</script>
<h2>Log</h2>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
</body>
</html>
Listen to the keyup event in the field. If the field's content has changed by more than 1 character after one keyup, something has been pasted.
As @epascarello points out, check right click events, too, as the user could be using the context menu.
Compare successive onChange events. If the difference between them is more than one character, it's a paste. Else it's typed in.
I am actually going to suggest it listens to every keyup because it has multiple uses, if you type @ it will suggest friends, etc.
It probably scans the text and finds links and makes them, well linkable, and then crawls the page so you can post it as "Sharing" the page.
<script type="text/javascript">
$(document).ready(function(){
$("#text").keypress (function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if ((code == 86 || code == 118) && e.ctrlKey) //86 = v 118 = V
{
alert("Pasted!");
}
});
});
</script>
</head>
<body>
<textarea id="text">
</textarea>
</body>
</html>
I think the most reliable way to do this is to implement it on your own, for example like this:
$(document).ready(function(){
var ctrl = false;
var pasted = 0;
$("#paste").keydown(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
$("#console").val($("#console").val()+String(code)+",");
if (!ctrl && code == 17){
ctrl = true;
}else{
if(ctrl && code == 86){
$(".paste>div")[0].innerHTML = "Pasted "+(++pasted)+"x";
}
}
});
$("#paste").keyup(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 17){
ctrl = false;
}
});
});
$(document).ready(function(){
var ctrl = false;
var pasted = 0;
$("#paste").keydown(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
$("#console").val($("#console").val()+String(code)+",");
if (!ctrl && code == 17){
ctrl = true;
}else{
if(ctrl && code == 86){
$(".paste>div")[0].innerHTML = "Pasted "+(++pasted)+"x";
}
}
});
$("#paste").keyup(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 17){
ctrl = false;
}
});
});div.top {
width: 100%;
display: inline-block;
}
div.top>div {
width: 50%;
display: inline-block;
float: left;
padding: 0px 10px 0px 0px;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100px;
resize: none;
box-sizing: border-box;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div>
<div>
Try paste here:
</div>
<div class="test">
<textarea value="" id="paste"></textarea>
</div>
</div>
<div>
<div>
Console:
</div>
<div class="console">
<textarea value="" id="console"></textarea>
</div>
</div>
<div class="paste">
<div>
Pasted:
</div>
</div>
</div>Check the field at half-second increments. If you detect a large change in the amount of text, it has probably been pasted.
keypress does not work in IE8. Use keydown instead.