Posted at

クリップボードのデータを入力フォームに投入するブックマークレット


やりたいこと

SpreadSheetなどに書いたデータをコピーして入力フォームに流し込みたい。


流し込みたい対象の入力フォーム

<html lang="ja">

<head>
<meta charset="utf-8">
<title>clipboard test</title>
</head>
<body>
<form action="">
<div>番号<input name="no"></div>
<div>氏名<input name="name"></div>
<div>よみ<input name="yomi"></div>
<div>誕生日<input name="birthday"></div>
</form>
</body>
</html>


コピー元データ

入力データ.png


ブックマークレット

javascript:(function(){

navigator.clipboard.readText().then(
clipText => {
var cols = clipText.split("\t");
document.querySelector("input[name='no']").value = cols[0];
document.querySelector("input[name='name']").value = cols[1] + cols[2];
document.querySelector("input[name='yomi']").value = cols[3] + cols[4];
document.querySelector("input[name='birthday']").value = cols[5];
}
);
})()

上記を改行を消して1行にしてブックマークに保存します。

javascript:(function(){navigator.clipboard.readText().then(clipText => {var cols = clipText.split("\t");document.querySelector("input[name='no']").value = cols[0];document.querySelector("input[name='name']").value = cols[1] + cols[2];document.querySelector("input[name='yomi']").value = cols[3] + cols[4];document.querySelector("input[name='birthday']").value = cols[5]})})()

navigator.clipboard.readText()はクリップボードへのアクセス許可が必要なので、Chromeの場合はアドレスバーの左の鍵マークを押して『サイトの設定』を開き、権限のところにある『クリップボード』を『許可』にします。(httpsじゃないと許可にできません)

コピー元データをコピーして(クリップボードにある状態にして)、保存したブックマークのボタンを押したら入力フォームにデータが入ります。

参考:MDN web docs - Navigator​.clipboard