Question

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

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

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

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

没有JS，我可以这样做吗？如果不是我怎么用jquery做到这一点？

Answer 1

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

http://jsfiddle.net/FvFVJ/

html相当简单。只需在您的选择旁边添加一个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。值得注意的事情

select元素opacity:0使其无形但仍可点击
伪元素.wrap:after，用作下拉箭头（*）
z-index排序，它将输入置于选择的顶部，预期角落这将作为下拉按钮
宽度需要在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或IE中不起作用。解决方法是使用.wrap元素的背景图像

Answer 2

Fiddle
与@Datoku的答案相反，这更直接，您不需要先选择您的文字。只需点击 ctrl + c ，<select>有焦点，它会将选定的<option>文字复制到剪贴板。
这可以在没有jQuery或funky css的现代浏览器（包括IE＆gt; 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();
}

Answer 3

据我所知，无法标记选项元素的文本。不用闪光灯将文字复制到剪贴板也是不可能的。

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

<!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/

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

Answer 4

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

从选择控件html复制所选项目的文本

4 个答案: