Onpaste仅由键盘粘贴触发

时间:2018-05-24 10:06:48

标签: javascript html paste

我有这段代码:

<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的{​​{1}}通过input进行更改时,onkeyup的{​​{1}}会获得该值,如果恰好是数字。但是,data-data永远不会运行。如果我通过键盘粘贴,则span的{​​{1}}将成功更新,但这只是因为我的onpaste,即如果我没有该属性,甚至用键盘粘贴不会运行。为什么data-data在我的情况下失效?我在Chrome和Firefox中检查过这个。

修改

事实证明,onpaste已执行,但值不是粘贴的文本。我认为这里需要一个丑陋的解决方案,涉及span

2 个答案:

答案 0 :(得分:1)

粘贴事件在<input>的值设置之前触发,否则您无法阻止其默认行为(即设置<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">

答案 1 :(得分:0)

我已使用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">