Question

我的角度项目遇到问题，在本地主机上，当我测试从剪贴板粘贴数据的功能时，效果很好

clipboard.js文件：

function pasteClipBoard(){}

pasteClipBoard.prototype.clipboardData = function clipboardData(textbox){

    navigator.clipboard.readText().then(

        clipText => textbox.value = clipText
    )
}
var clipboard = new pasteClipBoard()    
export {clipboard}

在 .ts文件中使用我的剪贴板功能：

@ViewChild("keyTextbox") keyTextbox:DxTextBoxComponent

clipboardPaste($t){
    clipboard.clipboardData(this.keyTextbox)
}

.html文件：

<dx-text-box id="textbox_paste" [(value)]="textbox" #keyTextbox width="85%"></dx-text-box>

<dx-button icon="glyphicon glyphicon-paste" hint="Paste data from clipboard" width="15%" (onClick)="clipboardPaste($event)"></dx-button>

但是在服务器（IIS）上，此错误消息不起作用：

错误TypeError：无法读取未定义的属性'readText'

https://stackblitz.com/edit/angular-b1f7ou

Answer 1

我已经修改了您的代码，例如波纹管

在您的组件上，切换到：

export class AppComponent  {
  @ViewChild("keyTextbox") keyTextbox:ElementRef // <-- should be ElementRef.

  clipboardPaste($t){
      clipboard.clipboardData(this.keyTextbox.nativeElement); // Here we provide the real HTMLElement object as parameter.
  }
}

然后在剪贴板助手中：

pasteClipBoard.prototype.clipboardData = textbox => {
  const el = document.createElement('textarea'); // We create temp textarea.
  el.value = textbox.value; // We populate the original values.
  el.setAttribute('readonly', ''); // we make it hidden.
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el); // We inject it on the dom to make next line working.
  el.select(); // We select the full text.
  document.execCommand('copy'); // We ask the browser to copy the content.
  document.body.removeChild(el); // We remove from dom the temp textarea.
}

you can have look on the live sample

如何从发夹剪贴板中粘贴？

1 个答案: