代码之家 › 专栏 › 技术社区 › Lajos Arpad

OnPaste仅由键盘粘贴触发

paste html javascript

Lajos Arpad · 技术社区 · 6 年前

我有这个代码:

<input type="text" id="point-setter-input" onkeyup="if (!isNaN(this.value)) {document.getElementById('point-setter-span').setAttribute('data-data', 'data=' + this.value)};" onpaste="if (!isNaN(this.value)) {document.getElementById('point-setter-span').setAttribute('data-data', 'data=' + this.value)};" value="0">
<span class="api command initialized" data-command-name="SetPoints" data-events="click" data-container="#popup-content" id="point-setter-span" data-data="data=3">Pontok MentÃ©se</span>

每当 value 的 input 更改通过 onkeyup , data-data 的 span 如果它恰好是一个数字,则获取该值。然而, onpaste 永远不会跑。如果我通过键盘粘贴,那么 数据数据 的 跨度 将成功更新,但这只是因为 打开键 也就是说,如果没有该属性,即使使用键盘粘贴也不会运行。为什么是 粘贴 在我的情况下是不正常的?我已经在Chrome和Firefox中检查过了。

编辑

结果是执行了onPaste,但值不是粘贴的文本。我认为这里需要一个丑陋的解决方案,包括 setTimeout .

2 回复 | 直到 6 年前

Kaiido NickSlash 6 年前

粘贴事件在 <input> 的值已设置,否则无法阻止其默认行为(即设置 <输入> 的值)。

所以当你检查的时候 if(!isNaN(this.value)) ,仍没有设置粘贴事件中包含的新值。

要解决这个问题,只需听 input 事件,在任何情况下都将被激发。

var inp = document.getElementById('inp');
inp.onpaste = function() {
  console.log('paste', this.value);
};
inp.oninput = function() {
  console.log('input', this.value);
}

<input type="text" id="inp">

Lajos Arpad 6 年前

我用解决了这个问题 setTimeout ,所以当我使用它时,该值发生了更改:

<input type="text" id="point-setter-input" onkeyup="setTimeout(() => {if (!isNaN(this.value.trim())) {document.getElementById('point-setter-span').setAttribute('data-data', 'data=' + this.value)};}, 4);" onpaste="setTimeout(() => {if (!isNaN(this.value.trim())) {document.getElementById('point-setter-span').setAttribute('data-data', 'data=' + this.value)};}, 4);" value="0">

推荐文章