コピペで一度に複数の Inputbox に分けてペーストしたい
日付：2021-12-24更新日：2021-12-24
目次
早速、調べてやってみた
最初は、え？そんなこと出来るの？と皆目見当がつかなかったのですが、探せばある…見つけました。
↓これです。
https://jsfiddle.net/661rmoro/2/
私がやりたい事とドンピシャ！ではないんですが、イメージとしてはこれ。
ユーザーがペーストした時に、情報を分けて、各インプットボックスに値を入れる。
そんなわけで、出来るってこととイメージが付いたので、早速やってみましたよー！
桁数をチェックしたり、数字とテキストをチェックしたりなどはしておりませんが（やれよ）、はい出来上がりと。
ここまでは、良かった、良かったんですよ。。。
既存の React コンポーネントに実装する
まず、上記のコードのままだと、エラーでまくり、値も全然入らねーに1日（と言っても午後からだけどさ）かかってましたね…
既存のコンポーネントに追加するだけなのに、、ぐぬぬ。
target を決める必要はない
const target = document.getElementById('Form');
↑これ不要。そもそもコンポーネント内にかいてるんだから、これはいらんなと。
addEventListener って使えるの？？
target.addEventListener('paste', (event) => {
使えるのかもしれないけど、いや結局うまくいかなかったのでダメなんだと思う。
なので、代わりに onPaste を使いました。
この辺りの記事かな↓
ReactjsonPasteイベントから貼り付けられた値を取得する方法
input のフィールド内でペーストされたら発動って感じです。
<input onPaste={(e) => pasteInput(e)} ...
命令部分
const pasteInput = (e: React.ClipboardEvent<HTMLInputElement>) => {
//クリップボードの文字列を取得して配列に入れる
let numbers = Array.from(e.clipboardData.getData('text'));
//桁を数える
const valuesLetters = values.length;
const numbersLetters = numbers.length;
//桁をチェックする
if (valuesLetters === numbersLetters) {
//inputを全て取得
const inputBoxes = document.getElementsByName('num');
//各 inputbox に値を入れていきます
for (let i = 0; i < inputBoxes.length; i++) {
let inputBox: HTMLInputElement = inputBoxes[i] as HTMLInputElement;
inputBox.value = String(numbers[i]);
}
//最後にデータを引き渡す
let newCode = [...values];
newCode = numbers;
onChange(newCode);
} else {
alert('桁が違います');
}
};
久しぶりに詰んだ…
一日やってニッチもサッチも行かないことなんて、久しぶりでした…肩こったよ。まぁ定期的にあるけどね。
そんな時は、「全然動かねーよー」と tweet します。
そしたら誰かが助けてくれる…ナンテことはないんですがwww、なんか私の中で気分が抜けるんですよね～
まだ確認が残ってるんだけど、テストで動いてたからいけるはずーーーーっ！！