input type="text"とtextareaをまとめて呼ぶ名前を知らないので、Text Fieldsと呼ぶことにした

こんな感じでアプリケーション独自のコピー処理を実装していました。

document.addEventListener('copy', (clipboardEvent) => {
  // アプリケーション独自の情報をクリップボードに書き込む
  clipboardEvent.clipboardData.setData('text/plain', 'こんにちわ')
  clipboardEvent.preventDefault()
})

すると、ふつうのinput type="text" で文字列がコピペ出来なくなるんですよ。なので、次のようなガード条件を追加して、input type="text"を対象から除外します。

if(clipboardEvent.target instanceof HTMLInputElement) {
  return;
}

例えば下の例です。 input type="text"の文字列をコピーすると普通にコピーできます。 textareaの文字列をコピーすると決まった文字しかコピー出来ません。

See the Pen コピーイベントのハンドリング by shigeru.nakajima (@ledsun) on CodePen.

実際にクリップボードイベントを扱うときはinput type="text"とtexteareaを両方除外したくなります。このグループを表す良い名前を探します。

最初はcontentEditableがそれっぽいかな？と思いました。 contentEditableはinputやtexteareaには適用出来ません。つまり、これは背反したグループです。

で、考え出したのがText Fieldsという名前です。こんな感じの関数を作ってガード条件に使えばいいな、と思いました。

function isTextFields(htmlElement) {
  return (
    htmlElement instanceof HTMLInputElement ||
    htmlElement instanceof HTMLTextAreaElement
  )
}

@ledsun blog

無味の味は佳境に入らざればすなわち知れず

input type="text"とtextareaをまとめて呼ぶ名前を知らないので、Text Fieldsと呼ぶことにした

参考