至少在Chrome for Windows的最新版本中,粘贴事件监听器给了我不一致的结果。
我正在尝试从屏幕上的两个列分区侦听粘贴事件,并允许用户将文本粘贴到一列或另一列,具体取决于他/她最后点击的位置。出于某种原因,粘贴的文本总是转到右侧列。
有人指出,我可以使用<input>
代替<p>
,但是一旦用户粘贴了文字,我希望我的脚本能够回复粘贴文字的点击字词和AFAIK {{ 1}}不允许这样做。
感谢任何经验,帮助或解决方法,谢谢。
使用Chrome浏览器版本63.0.3239.132进行测试,在Windows 7 Pro下,最新版本是在Ubuntu下的Chromium。
在advice from @Grant(下方)之后,我将内容插入到我的两个<input>
中,Chrome开始接受两者的粘贴操作。此外,Firefox在窗口的任何地方都没有响应粘贴操作,现在也开始接受了
将文字粘贴到两列。
与此同时,我在这里发布的示例仍然适用,我想知道原因:这是“预期”行为,还是这些浏览器粘贴事件的实现问题?
<div>
// Listen for "paste" events in each column:
//
document.getElementById("leftColumn").addEventListener("paste", leftPaste, false);
document.getElementById("rightColumn").addEventListener("paste", rightPaste, false);
// todo: for some reason leftPaste() is not triggered:
//
function leftPaste(e) {
var clipboardData, pastedData;
clipboardData = e.clipboardData;
pastedData = clipboardData.getData('Text');
alert(pastedData);
document.getElementById('leftPara').textContent = pastedData;
}
function rightPaste(e) {
var clipboardData, pastedData;
clipboardData = e.clipboardData;
pastedData = clipboardData.getData('Text');
alert(pastedData);
document.getElementById('rightPara').textContent = pastedData;
}
body {
color : #334455;
background-color: #aabbcc;
font-family: 'PT Sans', sans-serif;
font-size : 14px;
cursor : default;
}
.frame {
border: 1px solid rgb(31, 40, 49);
background-color : #283849;
color : #aabbcc;
overflow: auto;
position: relative;
}
.myColumn {
height: 90vh;
overflow: auto; /*causes scrollbars*/
float: left;
width: 45%;
margin-left: 4%;
}
答案 0 :(得分:1)
我无法明确地告诉你为什么这种行为是这样的 - 也许有人会更聪明,但我遇到过div之前需要实际拥有内容的情况才能使div成为可获得焦点。这是一支笔,展示了预期的结果:https://codepen.io/anon/pen/QaQBPV。 - 文字“左”。和“对。”使它可以单独聚焦。
<div id=rightColumn class="myColumn frame">
Right <!-- this bit -->
<p id=rightPara style="word-wrap: break-word; white-space: pre-wrap;" class=clickable></p>
</div>
包装div时在父div上触发事件的原因是事件冒泡,你设置为true,我在笔中将其更改为false(事件监听器中的最后一个参数) - 请参阅{{ 3}}了解更多信息。