コピペで一度に複数の 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、なんか私の中で気分が抜けるんですよね~

まだ確認が残ってるんだけど、テストで動いてたからいけるはずーーーーっ!!

目次ページに戻る