发表新帖
发表新帖

Copy selected item's text from select control html

后端 未结
关注
4 1225
说谎
说谎 2021-01-17 05:11

I have a select control with pre defined values and I want my users to be able to copy the selected item\'s text with CTRL + C

I don\'t want them to be able to chang

相关标签:
4条回答
  • 轮回少年
    2021-01-17 05:18

    Fiddle
    As opposed to @Dogoku's answer, this is more direct, you don't need to first select your text. Just hit ctrl+c whilst the <select> has focus and it will copy the selected <option>'s text to your clipboard.
    This'll work in modern browsers (including IE>7) without jQuery or funky css.

    //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();
}
    0 讨论(0)
  • 感情败类
    2021-01-17 05:33

    As far as I know, it is not possible to mark the text of a option element. Copy text into clipboard without flash is impossible, too.

    This solution is not the best, but it's the simplest:

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

    Just copy the text into a input field, so the user can select and copy it.

    0 讨论(0)
  • 既然无缘
    2021-01-17 05:34

    Here's a way to mimick the behaviour you are after, with a bit of positioning magic and jQuery. The code is only tested on Chrome, so it might need a bit of tweaking to look good in all browsers. Also see the note at the bottom of the page for IE7

    http://jsfiddle.net/FvFVJ/

    The html is rather simple. Just add an input field next to your select and wrap both in a div. You can add the property readonly to the input field, to disable editing if you wish

    .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;
}

    Both elements are position:absolute inside the wrapper. Things to notice

    1. The select element has opacity:0 which makes it invisible but still clickable
    2. The pseudo element .wrap:after, which acts as a dropdown arrow (*)
    3. The z-index ordering, which puts the input on top of the select, expect of the corner which will act as the dropdown button
    4. The widths need to be properly fixed, either in css (static) or by javascript (dynamic)
    $(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);
    });
});

    And finally some javascript to set the correct widths for our elements and update the input text everytime we choose a new value from the select.

    (*) : The pseudo element will not work in IE7 or . A workaround is to use a background image for the .wrap element

    0 讨论(0)
  • 梦毁少年i
    2021-01-17 05:34

    It is not possible to achieve in modern browsers without Flash due to security restrains. You can check this site to review the options for jQuery: http://www.jquery4u.com/plugins/jquery-copy-clipboard-4-options/

    0 讨论(0)
 看不清?
提交回复
热议问题