select2 ウィジェットで選択した値のラベル (値自体ではない) を取得し、clipboardjs を使用してクリップボードにコピーしようとしましたが、失敗しました。
これを簡単に再現するには、https: //select2.org/getting-started/basic-usage にアクセスして、select2 の例で「アラスカ」を選択してください。
要素を調べると、選択した値「アラスカ」を保持している要素が次の場所に表示されます。
<span class="select2-selection__rendered" id="select2-zhjr-container" role="textbox" aria-readonly="true" title="Alaska">Alaska</span>
そこで、clipboard.js ソースから変更したこのコードを使用して選択を試み、選択によるテキスト値の選択をシミュレートしました。
element = document.querySelector('#select2-zhjr-container')
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
selectedText = selection.toString();
console.log('selectedText: ' + selection)
そして、selectedText が空であることがわかりました。
selectedText 値を正しく取得して、 clipboardjs を使用してクリップボードにコピーできるようにするにはどうすればよいですか?
はい、DOM を使用してラベル テキストも取得できますが、クリップボードにコピーできません。ラベル テキストは、プログラムで選択してからクリップボードにコピーする必要があります。
プログラムで選択したテキストを選択して取得すると、失敗します。
ありがとうございました。