0

我有一个带有预定义值的选择控件，我希望我的用户能够使用 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 做到这一点？

4

4 回答 4

2

这是一种模仿您所追求的行为的方法，带有一些定位魔术和 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在包装内。注意事项

  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 来为我们的元素设置正确的宽度，并在每次我们从选择中选择一个新值时更新输入文本。

(*) : 伪元素在 IE7 或 . 一种解决方法是为.wrap元素使用背景图像

于 2013-06-30T22:16:59.490 回答
2

小提琴
与@Dogoku 的回答相反，这更直接，您无需先选择文本。只需在获得焦点时ctrl+它就会将选定的文本复制到剪贴板。 这适用于没有 jQuery 或时髦 css 的现代浏览器（包括 IE>7）。c<select><option>

//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();
}
于 2015-04-16T02:19:07.530 回答
0

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

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

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

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

于 2013-06-30T21:52:51.927 回答
0

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

于 2013-06-30T21:52:56.507 回答