复制所选项目's选择控件html中的文本

Copy selected item's text from select control html

本文关键字：控件 选择 html 文本 选项 项目 复制      更新时间：2023-09-26

我有一个带有预定义值的选择控件，我希望我的用户能够用CTRL+C 复制所选项目的文本

我不希望他们能够更改项目的文本（只需用鼠标/键盘选择）

这是一个显示问题的小提琴（我无法选择所选项目的文本）

http://jsfiddle.net/5C3Q9/1/

<select>
  <option value="orange">Orange</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="white">White</option>
</select>

没有JS我能做到吗？如果没有，我该如何使用jquery？

这里有一种模仿你所追求的行为的方法，使用一些定位魔法和jQuery。该代码只在Chrome上进行了测试，因此可能需要进行一些调整才能在所有浏览器中看起来都很好。另请参阅IE7 页面底部的注释

http://jsfiddle.net/FvFVJ/

html相当简单。只需在select旁边添加一个input字段，并将两者包装在div中。您可以将属性readonly添加到输入字段中，以禁用编辑（如果您希望）

.wrap {
    position: relative;
    border: 1px solid #ccc;
    height: 21px;
    border-radius: 4px;
}
.wrap select {
    opacity: 0;
    position: absolute;
    top: -3px;
    left: -3px;
    z-index: 1;
}
.wrap input {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 2px;
    z-index: 2;
    border: 0;
}
.wrap:after{
    content: "'25BE";
    font-size: 1.5em;
    position: absolute;
    right: 0;
    top: -3px;
    z-index: 0;
}

这两个元素都是包装器中的position:absolute。需要注意的事项

  1. select元素具有opacity:0，使其不可见但仍可单击
  2. 伪元素.wrap:after，用作下拉箭头（*）
  3. z-index排序，它将输入置于选择的顶部，除了角它将充当下拉按钮
  4. 宽度需要正确固定，可以使用css（静态），也可以使用javascript（动态）
$(function () {
    $(".wrap").width($(".wrap select").width());
    $(".wrap input").width($(".wrap select").width() - 20);
    $(".wrap select").on("change", function () {
        var txt = $(this).find(':checked').text();
        $(".wrap input").val(txt);
    });
});

最后是一些javascript，为元素设置正确的宽度，并在每次从select中选择新值时更新输入文本。

（*）：伪元素在IE7或中不起作用。解决方法是为.wrap元素使用背景图像

Fiddle
与@Dogoku的答案相反，这更直接，你不需要首先选择文本。只需在<select>有焦点时点击ctrl+c，它就会将所选<option>的文本复制到剪贴板
这将适用于没有jQuery或时髦css的现代浏览器（包括IE>7）。

//to be ran on keydown, which occurs before clipboard copy
function copyWatch(e) {
    e = e || event;
    if (
        //not ctrl+C
        (!(e.ctrlKey && e.keyCode == '67')) ||
        //nothing selected
        (this.selectedIndex < 0)
    )
        return;
    //create selectable text
    var copyEl = document.createElement('textarea');
    copyEl.innerHTML = this.options[this.selectedIndex].innerHTML;
    //hide it, but in a way the browser thinks is clickable
    //(no visibility:hidden, display:none)
    copyEl.style.position = 'absolute';
    copyEl.style.left = '-9999px';
    var that = this;
    //add a call back for after the ctrl+c is completed
    copyEl.onkeyup = function() {
        //remove the extraneous element
        copyEl.parentNode.removeChild(copyEl);
        //return focus to the select
        that.focus();
    };
    //add it to the document, and highlight all the text in the textarea,
    //ready for the ctrl+c copy event to fire
    document.body.appendChild(copyEl).select();
}

据我所知，不可能标记选项元素的文本。在没有闪光灯的情况下将文本复制到剪贴板也是不可能的

这个解决方案不是最好的，但它是最简单的：

<!DOCTYPE html>
<body>
<select>
    <option value="orange">Orange</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="white">White</option>
</select>
<input type="text"></input>
</body>

-

$('body').on('change', 'select', function() {
    $('input').val($(this).find(":selected").text()).select();
})

http://jsfiddle.net/5C3Q9/2/

只需将文本复制到输入字段中，用户就可以选择并复制它。

由于安全限制，在没有Flash的现代浏览器中是不可能实现的。您可以查看此网站以查看jQuery的选项：http://www.jquery4u.com/plugins/jquery-copy-clipboard-4-options/

相关文章：