よく入力フォームのテキストをコピーするボタンがあると思うけど、
それを実装してみる。
昔は document.execCommand() を使って実装していたみたいだけど非推奨になっている。
その1 パッケージでお手軽に実装する
- npm
- CDN
index.html
- パッケージは CDN 経由で使用
- ID で指定した入力フォームのテキストをコピーする
- npm 経由だと navigator.clipboard ではなく clipboard でアクセスする
- CDN 経由だと navigator.clipboard を上書きして使っている
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>clipboard - js html sample</title>
</head>
<body>
<input id="InputText" type="text" name="" value="copy text">
<button type="button" onclick="javascript:copy()">copy</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/4.0.0/es5/overwrite-globals/clipboard-polyfill.overwrite-globals.es5.js"></script>
<script type="text/javascript">
function copy() {
const target = document.getElementById('InputText')
if (!target) { return }
navigator.clipboard.writeText(target.value).then(
() => { console.log('success') },
() => { console.log('failed') }
)
}
</script>
</body>
</html>
その2 Vanilla JS
- navigator.clipboard は https 化されたサイトでないと使用できないらしいので開発に不向き
- navigator.clipboard が使えない場合は document.execCommand() を使うしかないかも
index.html
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>clipboard - js html sample</title>
</head>
<body>
<input id="InputText" type="text" name="" value="copy text">
<button type="button" onclick="javascript:copy()">copy</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/4.0.0/es5/overwrite-globals/clipboard-polyfill.overwrite-globals.es5.js"></script>
<script type="text/javascript">
function copy() {
const target = document.getElementById('InputText')
if (!target) { return }
if (navigator.clipboard) {
navigator.clipboard.writeText(target.value).then(
() => { console.log('success') },
() => { console.log('failed') }
)
return
}
target.select()
document.execCommand('copy')
console.log('success')
}
</script>
</body>
</html>