jquery选择图像不起作用

Posted 2023-03-06

技术标签:

【中文标题】jquery选择图像不起作用【英文标题】：jquery select image not working 【发布时间】：2016-07-21 16:33:18 【问题描述】：

我的目标是将图像复制到剪贴板。由于安全原因不允许复制图像，我要解决的用例是：

ctrl + c

问题是，如果我为输入执行此操作，我可以轻松选择其中的文本，但我无法为图像执行此操作。下面是我正在尝试做的抽象版本，现在主要只是选择图像。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function()
    $("#myImage").focus();
    $("#myImage").select();
);
</script>
</head>
<body>
 <img id="myImage"   src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" >
</body>
</html>

以下是相同的示例，但对于输入，它可以工作。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function()
    $("#myInput").focus();
    $("#myInput").select();
);
</script>
</head>
<body>
 
<input id="myInput" value="hello"/>
</body>
</html>

如果有人能给我正确的方法，我将不胜感激。谢谢。

【问题讨论】：

图像元素没有select 方法。试试***.com/questions/4183401/… 【参考方案1】：

$(document).ready(function()
    $("#myImage").bind('load', function()
        $("#myImage").focus();
        $("#myImage").select();
        alert("ok");
    );
);

您还应该检查一下：jQuery callback on image load (even when the image is cached)

【讨论】：

【参考方案2】：

我使用clipboard.js 解决了我的问题，并找到了一种只需一个按钮即可将图像复制到剪贴板的方法。以下是我的解决方案。

请注意，在您下载 cliboardjs 之前它不会工作。

<!DOCTYPE html>
<html>
<head>
  <script src="clipboard.min.js"></script>
  <title></title>
</head>
<body>

  <div id="myDiv">

    <img   src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" >

  </div>
  <button class="btn" data-clipboard-target="#myDiv">
    Copy to clipboard
  </button>
  <script type="text/javascript">

    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) 
      e.clearSelection();
    );

  </script>
</body>
</html>

【讨论】：

以上是关于jquery选择图像不起作用的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 工具 – 悬停时的图像更改不起作用 [关闭]

使用 nameProp 的 JQuery 图像翻转在 Firefox 和 Chrome 中不起作用

为啥 jQuery 选择器在这里不起作用？

使用 jquery 的 Phonegap 更改图像 src 在 Android 上不起作用

使用 ajax、jquery 和 PHP 从数据库更新图像不起作用

Jquery $('class', this) 选择器不起作用