5

マーチャントの詳細 (各マーチャントの名前、電話番号、電子メール アドレス) をテーブルに出力する検索フォームがあります。
これらの各フィールドの横にコピー ボタンを配置して、ユーザーがクリックしてクリップボードにコピーできるようにしたいと考えています (コピーするとテキストが強調表示されます)。ユーザーは IE9 のみでブラウジングします。

問題は、複数の結果セットが存在する可能性があるため、以下のテキストエリアで行ったように、スクリプトが特定の番号付き関数を呼び出すことができないことです。

function highlightmetasearch01() {
    document.copydata01.text2copy01.select();
     document.copydata01.text2copy01.focus(); 
}
function copymetasearch01() {
    highlightmetasearch01();
    textRange = document.copydata01.text2copy01.createTextRange();
    textRange.execCommand("RemoveFormat");
    textRange.execCommand("Copy");
}

function highlightmetasearch02() {
    document.copydata02.text2copy02.select();
    document.copydata02.text2copy02.focus(); 
}
function copymetasearch02() {
    highlightmetasearch02();
    textRange = document.copydata02.text2copy02.createTextRange();
    textRange.execCommand("RemoveFormat");
    textRange.execCommand("Copy");
}

HTML:

<textarea name="text2copy01">The first textarea.</textarea>
<br />
<button onclick="copymetasearch01();return false;">COPY</button>

<textarea name="text2copy02">The second textarea.</textarea>
<br />
<button onclick="copymetasearch02();return false;">COPY</button>

これが可能かどうか疑問に思っていましたか？...

<td><span>Name from DB here</span> <button onclick="<!--copy and highlight text within most recent span tag-->">COPY</button></td>

<td><span>Phone from DB here</span> <button onclick="<!--copy and highlight text within most recent span tag-->">COPY</button></td>

<td>Other text here that shouldn't be highlighted or copied <span>Email address from DB here</span> <button onclick="<!--copy and highlight text within most recent span tag-->">COPY</button></td>

または、これにアプローチするより効率的な方法はありますか?

4

3 に答える 3

1

この質問：

JavaScript でクリップボードにコピーするにはどうすればよいですか?

...JavaScript を使用してテキストをクリップボードにコピーすることについて、かなり長い議論が含まれています。最も支持された (そして私の意見では正しい) 答えは、実際にはコピーを行いませんが、ポップアップを利用して、既に選択されているテキストを含むテキスト ボックスを表示し、ユーザーが CTRL+C を押すだけでコピーできるようにします。

この理由は、サイトがユーザーのクリップボードの内容を制御することは危険であり、ユーザーにとって望ましくない可能性があるためです。ここでユーザーの許可を得ていることを理解しましたが、それでも...上記の投稿の回答が示唆するものを取得してサイトに適用する場合は、コピーするテキストを自動的に選択するボタンを含めることができますその隣のフィールド。フィールド内のテキストを選択する方法については、次の投稿を参照してください:入力フィールド内の部分的なテキストをプログラムで選択する。

于 2012-12-04T12:07:26.770 に答える
0

コピー方法を理解したようで、動的に生成された要素にアクセスする方法が必要なだけなので、document.getElementById('text2copy02').createTextRange()代わりにdocument.copydata02.text2copy02.createTextRange(). 以下のコード例を参照してください。あなたの問題を正しく理解できたと思います。

html:

<td><span id="copyMe1">Name from DB here</span> <button onclick="copyMeToClipboard('copyMe1')">COPY</button></td>

<td><span id="copyMe2">Phone from DB here</span> <button onclick="copyMeToClipboard('copyMe2')">COPY</button></td>

js:

function copyMeToClipboard(elementId) {
    document.getElementById(elementId).select();
    document.getElementById(elementId).focus(); 
    textRange = document.getElementById(elementId).createTextRange();
    textRange.execCommand("RemoveFormat");
    textRange.execCommand("Copy");
}
于 2012-12-04T12:15:30.573 に答える
0

あなたの問題に対する良い解決策としてjQueryを差し込むつもりです。質問で言及されていないことは知っていますが、CSS スタイルのセレクターを使用できるようにすることで、DOM ツリーのトラバースが非常に簡単になります。これをクリックイベントハンドラーと組み合わせると、「これが可能かどうか疑問に思っていましたか?」というメッセージが表示されます。解決：

// Give your copy buttons the "copier" class
// This will add a click event handler:
$('.copier').click(function() {
    // Find the nearest-parent td to the clicked button:
    var row = $(this).closest('td');

    // Find the first span within that td:
    var txt = row.find('span:first');

    // Do the copying:
    window.clipboardData.setData('Text', txt.text());

    // And the highlighting:
    var range = document.body.createTextRange();
    range.moveToElementText(txt[0]);
    range.select();
});

今、私はコピーを残してコードを強調表示しました（編集：今は私がしなかったことを除いて）、それは少し長いので、スタックオーバーフローの他の場所でいくつかの良い（クロスブラウザ）実装を見つけることができます：

それが役立つことを願っています!

于 2012-12-04T12:21:51.300 に答える