Question

我正试图找出如何'选择'图像。也就是说，如果您双击此页面上的任何文本，该单词将被突出显示/选中。

是否可以对图像执行相同的操作。

<img src="http://www.free.fr/freebox/im/logo_free.png" style="max-width:200px;" />
<p>
  Here is some content. Double click a word to 'select' it. Now try
  with the image and notice it doesn't get selected.
</p>

如果单击JSFiddle的结果窗格（呈现HTML的页面）并在键盘上单击 Ctrl + A （全选），则可以看到图像被选中（它变为蓝色）。如何通过单击（或双击）图像来选择图像？

Answer 1

这是一个通过javascript以编程方式进行选择的小例子。有趣的是看到window.getSelection()以及Range类API

的文档

＆＃13;

var btnToggleSelection = document.getElementById('toggleSelection');
btnToggleSelection.imgSelected = false;

btnToggleSelection.addEventListener('click', function(e) {

  if (this.imgSelected) {
    /* deselect image */
    clearSelection();
    this.innerHTML = "Select";
  } else {
    /* select image */
    var s = window.getSelection();
    var r = document.createRange();
    r.selectNode(document.images[0]);
    s.addRange(r);
    this.innerHTML = "Deselect";
  }

  this.imgSelected = !this.imgSelected;
});

function clearSelection() {
  if (window.getSelection) {
    if (window.getSelection().empty) { // Chrome
      window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) { // Firefox
      window.getSelection().removeAllRanges();
    }
  } else if (document.selection) { // IE
    document.selection.empty();
  }
}

＆＃13;

<img src="http://www.free.fr/freebox/im/logo_free.png" style="max-width:200px;" />
<button id="toggleSelection">Select</button>

＆＃13;

检查代码并使其符合您的需求。如果您需要更多帮助，请告诉我。祝你好运！

Answer 2

只需向img代码contenteditable添加属性，即可让用户在双击时选择。

如何通过双击文本

2 个答案: