Copy selected item's text from select control html

Question

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 change the text of the item (just select it with the mouse/keyboard)

here is a fiddle that shows the problem (I can't select the text of the selected item)

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>

Can I do that without JS? if not how do i do that with jquery?

Answer 1

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

Answer 2

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();
}

Answer 3

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.

Answer 4

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/