HTMLで、ボタンとテキストボックスのペアが複数あり、ボタンを押すと隣にあるテキストボックスの値をクリップボードにコピーし、コピーした文字列を選択状態にした後で「コピー完了」とのアラートを出するjavascriptをChatGPTで生成してもらいましたが、以下のサンプルですと、テキストの選択状態が外れてしまいます。 formタグをを外すと意図したように動くのですが・・。（注：本番環境では、action内は、となってます）なお、MS Edgeでだけ動作すれば十分です。些細な修正で直らないものでしょうか？ function copyToClipboard(inputId) { // テキストボックスの値を取得 var input = document.getElementById(inputId); var text = input.value; // テキストをクリップボードにコピー navigator.clipboard.writeText(text) .then(function() { // コピー完了時の処理 input.select(); alert("コピー完了"); }) .catch(function(error) { // エラーハンドリング console.error("クリップボードへのコピーに失敗しました: ", error); }); } コピーコピーコピー

javascriptのちょっとした動作不良（原因は突き止めたのですが）

解決済

質問者：litton101
質問日時：2023/06/15 19:58
回答数：1件

HTMLで、ボタンとテキストボックスのペアが複数あり、ボタンを押すと隣にあるテキストボックスの値をクリップボードにコピーし、コピーした文字列を選択状態にした後で「コピー完了」とのアラートを出するjavascriptをChatGPTで生成してもらいましたが、以下のサンプルですと、テキストの選択状態が外れてしまいます。

formタグをを外すと意図したように動くのですが・・。
<form method="post" action="">
（注：本番環境では、action内は、<?php $_SERVER['PHP_SELF'] ?>となってます）

なお、MS Edgeでだけ動作すれば十分です。些細な修正で直らないものでしょうか？

<html>
<head>
<script>
function copyToClipboard(inputId) {
// テキストボックスの値を取得
var input = document.getElementById(inputId);
var text = input.value;

// テキストをクリップボードにコピー
navigator.clipboard.writeText(text)
.then(function() {
// コピー完了時の処理
input.select();
alert("コピー完了");
})
.catch(function(error) {
// エラーハンドリング
console.error("クリップボードへのコピーに失敗しました: ", error);
});
}
</script>
</head>
<body>
<form method="post" action="">
<input size="30" type="text" id="input0" value="テスト文字列000"><button onclick="copyToClipboard('input0')">コピー</button><br>
<input size="30" type="text" id="input1" value="テスト文字列111"><button onclick="copyToClipboard('input1')">コピー</button><br>
<input size="30" type="text" id="input2" value="テスト文字列222"><button onclick="copyToClipboard('input2')">コピー</button>
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2023/06/15 23:17

こんばんは

＞formタグをを外すと意図したように動くのですが・・。
ボタンクリックでフォームがサブミットされているせいだと思われます。
見てもわからないかも知れませんが、同じページに遷移しているので初期状態に戻っているのだと推測します。
良く見ると、インプット要素が一瞬だけ選択状態になるのが見えると思います。

対応として考えられそうなのは・・
1）ボタン要素に属性として type="button" を明示し、サブミットを防止する。
　ボタン要素のデフォルトは type="submit"ですので。
　（現状のままで、ご希望の動作になると思います）
https://developer.mozilla.org/ja/docs/Web/HTML/E …

2）ボタン要素ではなく、普通のインライン要素をボタンの様に見せて表示する
　（現状のままで、ご希望のようになると思います）

3）ボタンを押された際に、スクリプト側でイベントの伝搬を中止しサブミットを防止する。
　 event.preventDefault();　の1行を追加すれば良いです。
https://developer.mozilla.org/ja/docs/Web/API/Ev …

　ただし、現状のままだと eventオブジェクトを取得できませんので、HTMLも
　変える必要がありあります。
　onclick属性で設定する場合には、呼び出し側を、
　　copyToClipboard(event, 'input0')"
　などとしておき、受け取り側も
　　function copyToClipboard(event, inputId) { ～～
　のようにして、受け渡す必要があります。

onclickにイベント処理を記述すると、繰り返しが多くHTMLが煩雑になるので、イベントをまとめて上位要素に設定しておくという方法も考えられます。
また、スクリプトからaddEventListenerメソッドでイベントを設定すると、コールバックの第一引数にeventが渡される仕様になっていますので、eventオブジェクトを受け渡す必要もなくなります。
https://developer.mozilla.org/ja/docs/Web/API/Ev …

- 0
- 件

通報する

この回答へのお礼

早速ご回答ありがとうございました。ボタン要素のデフォルトは type="submit"というのを存じ上げず、結論的には1）の方法で解決しました。

＞良く見ると、インプット要素が一瞬だけ選択状態になる

そうなんです、ここがポイントかなーとは思っていました。

他にも実にいろいろ解決策があるものですね。保存させていただきます。

通報する

お礼日時：2023/06/15 23:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！