5
4

More than 5 years have passed since last update.

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

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

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4