我可以使用javascript粘贴到onClick的输入字段中

时间:2017-12-18 23:42:37

标签: javascript html clipboard copy-paste paste

另一位用户帮助我使用这个很好的脚本,它允许我单击一个表格单元格,其内容将复制到剪贴板。我不完全理解它,但它有效...我想现在为这个程序添加一些东西。这是原先的节目..



document.addEventListener('click', (e) => {
  let target = e.target;

  if(target.localName === 'td') {
  let range = document.createRange();
  range.selectNodeContents(target);  
  let sel= document.getSelection(); 
  sel.removeAllRanges(); 
  sel.addRange(range); 
  document.execCommand('copy');
  sel.removeAllRanges();
  target.classList.add('copy-animate');
  setTimeout(() => {target.classList.remove('copy-animate');}, 300);
  }
});

.copy-animate {background:#F00}
td {cursor:pointer;border:1px solid black}
input {border:1px solid black;width:200px}

Click a table cell to copy<br>
<table><td>milk</td><td>bread</td><td>eggs</td><td>cheese</td></table>

<br>This is the pasting area.  Try pasting here.<br>
<input type="text">
&#13;
&#13;
&#13;

上面的程序会侦听TD的点击并复制它。我现在想让它听取INPUT的点击,如果发生这种情况,请做一个粘贴。我想我可以添加类似下面的IF语句,但它没有用。请帮忙。所以最终结果应该允许我只需点击两下就可以从表格单元格复制到输入字段。我不想右键单击并从菜单中选择粘贴,或使用CTRL-V。

 if(target.localName === 'input') {
  let range = document.createRange();
  range.selectNodeContents(target);  
  let sel= document.getSelection(); 
  sel.removeAllRanges(); 
  sel.addRange(range); 
  document.execCommand('paste');
  sel.removeAllRanges();
  }

2 个答案:

答案 0 :(得分:2)

据我所知,您无法以编程方式在js中进行粘贴。这是一项安全措施。

您可以做的是跟踪具有焦点的元素并监听复制事件。然后,您可以检查原始元素的输入值或innerHTML,并获取放入目标元素的内容。

答案 1 :(得分:0)

这是创建和触发paste事件的完整示例。

const text = 'pasted text';
const dataTransfer = new DataTransfer();
dataTransfer.setData('text', text);
const event = new ClipboardEvent('paste', {
  clipboardData: dataTransfer,
  bubbles: true
});
const element = document.querySelector('input');
element.dispatchEvent(event)

请注意,还有一个新的Clipboard API,允许页面请求访问权限以读取用户的剪贴板数据。