Question

Facebook的状态更新输入（好吧，contenteditable div）检测链接。

在输入链接时，它会等到按空格键后才能获取URL。

粘贴链接时，会立即获取网址。

我可以在按下空格键后解析网址...但我不确定何时会检测到内容被粘贴。

任何解决方案都会很棒;一个jQuery格式的解决方案将是最好的！

Answer 1

现代浏览器支持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>

Answer 2

收听该字段中的keyup事件。如果字段的内容在一个keyup之后更改了超过1个字符，则会粘贴一些内容。

正如@epascarello指出的那样，检查右键单击事件，因为用户可能正在使用上下文菜单。

Answer 3

比较连续的onChange事件。如果它们之间的差异超过一个字符，那就是粘贴。否则就输入了。

Answer 4

我实际上会建议它听取每个keyup，因为它有多种用途，如果您输入@，它会建议朋友等。

它可能会扫描文本并查找链接并制作链接，链接良好，然后抓取页面，以便将其发布为“共享”页面。

Answer 5

 <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>

Answer 6

我认为最可靠的方法是自己实现它，例如：

$(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;
    }
  });
});

＆＃13;

$(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;
    }
  });
});

＆＃13;

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;
}

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

Answer 7

以半秒为增量检查字段。如果您检测到文本量发生了很大变化，则可能已将其粘贴。

Answer 8

keypress在IE8中不起作用。改为使用keydown。

facebook如何在链接被检测时检测到

8 个答案: