Document.exec命令不更新当前活动元素

Question

我有一个包含输入标签的预标签。有一个粘贴事件监听器绑定到pre标签。

＆＃13;

＆＃13;

$(function() {
if (document.querySelector('pre[contenteditable="true"]') != null) {
	    	document.querySelector('pre[contenteditable="true"]').addEventListener("paste", function(e) {
	    		e.preventDefault();
          //alert("test");
	    		var text = e.clipboardData.getData("text/plain");
	    		document.execCommand("insertHtml", false, text);
	    	});
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="previewEmailBody" class="blurbBody" placeholder="Reply" style="display:block" contenteditable="true">Testing
<input class="emailBodyToken" name="[Test]" size="54" value="[Test]" >
Testing</pre>

＆＃13;

＆＃13;

＆＃13;

现在 - 如果我点击输入元素并进行文本粘贴 - 它不会更新输入元素，而是更新pre元素中的文本。

仅在firefox中观察到上述行为。在chrome中，它按预期更新输入元素。我想在firefox中也有相同的行为。建议解决这个问题。

工作示例： https://jsfiddle.net/5mwk0bxc/7/

Answer 1

如果事件针对input元素，则需要让事件发生。

$(function() {
if (document.querySelector('pre[contenteditable="true"]') != null) {
            document.querySelector('pre[contenteditable="true"]').addEventListener("paste", function(e) {
        if (e.explicitOriginalTarget.tagName !== "INPUT")
                {
          e.preventDefault();
          //alert("test");
                var text = e.clipboardData.getData("text/plain");
                document.execCommand("insertHtml", false, text);
            }
    });
}
});

更新了JS小提琴

https://jsfiddle.net/5mwk0bxc/9/