经典复制到剪贴板是否一定需要输入字段/文本区域字段?

时间:2019-02-01 09:17:59

标签: javascript jquery copy clipboard

我不得不将锚标记内的一段文本复制到剪贴板。按照互联网上的建议
HTML:

          <div class="organizer-link">
         <i class="fa fa-link" id="copylink"></i>
         <a href="#" id="linktocopy">https://ticketnshop.com/events/124</a>
          </div>

JS:

 $("#copylink").click(function () {
         console.log("copy link clicked");
         $('#linktocopy').focus();
         $('#linktocopy').text().select();
         document.execCommand("copy");
        console.log($('#linktocopy').val());

    });

但是它没有用。

但是后来我用文本字段替换了定位标记,并复制了文本。

此过程是否严格要求文本区域/输入字段。如果不是,我做错了什么?

3 个答案:

答案 0 :(得分:2)

您使用的select()方法仅限于<input type="text">字段和<textarea>框。

在此处查看更多信息select method jquery

答案 1 :(得分:2)

您不能使用public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> { private Vector<String> mDataset; public static class MyViewHolder extends RecyclerView.ViewHolder { TextView title; TextView message; TextView date; public MyViewHolder(View v) { super(v); title = itemView.findViewById(R.id.title); message = itemView.findViewById(R.id.message); date = itemView.findViewById(R.id.date); } } public MyAdapter(Vector<String> myDataset) { mDataset = myDataset; } @Override public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View v = (View) LayoutInflater.from(parent.getContext()).inflate(R.layout.my_text_view, parent, false); MyViewHolder vh = new MyViewHolder(v); return vh; } @Override public void onBindViewHolder(MyViewHolder holder, int position) { String[] parts = mDataset.elementAt(position).split(";"); if (parts.length >= 4) { holder.title.setText(parts[2]); holder.message.setText(parts[3]); try { SimpleDateFormat inputFormat = new SimpleDateFormat("dd-MM-yyyy"); Date currdate = new Date(); Date date = inputFormat.parse(parts[0]); long diff = currdate.getTime() - date.getTime(); long days = TimeUnit.DAYS.convert(diff, TimeUnit.MILLISECONDS); if (days == 0) holder.date.setText(parts[1]); else holder.date.setText(parts[0]); } catch(Exception e) { e.printStackTrace(); } } } @Override public int getItemCount() { return mDataset.size(); } } ,因为您没有专注于文本字段(也不是文本区域)。

这是使用范围选择的有效示例。也许您也应该看看clipboard.js

select()
$(document).ready(function() {
  $("#copylink").click(function() {
    var containerid = "linktocopy";
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(document.getElementById(containerid));
      range.select().createTextRange();
      document.execCommand("copy");
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(document.getElementById(containerid));
      window.getSelection().removeAllRanges(range);
      window.getSelection().addRange(range);
      document.execCommand("copy");
      console.log("text copied");
    }
  });
});

答案 2 :(得分:1)

function copyToClipboard() {
  let textLink = document.getElementById('text');
  let textRange = document.createRange();

  textRange.selectNode(textLink);
  window.getSelection().removeAllRanges(textRange);
  window.getSelection().addRange(textRange);

  document.execCommand("Copy");

  console.log('text was copied!');
}
<div>
  <button id="copy" onclick="copyToClipboard()">Copy</button>
  <a id="text">Copied text from the tag "A"</a>
  <textarea placeholder="Paste this copied text"></textarea>
</div>