locked
How can I make span elements copyable via context menu?

    Question

  • Is there a way to mark certain span elements in my app as copyable, meaning press+hold will reveal the copy menu?
    Friday, August 15, 2014 8:32 AM

Answers

  • >> I wondered if there is an automated way to have *all* spans being copyable (via context menu).

    I'm afraid not. Maybe go through the whole HTML and fetch the span contents.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, August 27, 2014 7:55 AM
    Moderator

All replies

  • Hi pkursawe,

    An idea: While press+hold the div, a Menu object can be popup with a copy command inside, then we should be able to copy the content inside programmatically via Copying and pasting data

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Monday, August 18, 2014 2:48 AM
    Moderator
  • what `div` you mean? I am usin span elements and looking for a HTML built in way to do that if there is any
    Wednesday, August 20, 2014 7:20 PM
  • Sorry, I mean span here, wrong type to div.

    I wrote some code for this purpose, take a look:

    In the code, I append a click event here with the span while press+hold (not quite understand what do you mean by here, you mean for instance the menu display when pressing on the text more than some seconds?), I display a menu here with two options, one is for getting the innerHTML from span and another one is to change the span background color. You cold then follow the guide: Quickstart: Clipboard basics to create a datapackage for the Clipboard copy and paste.

        <script type="text/javascript">
            function pageloaded() {
                document.getElementById("titlecontainer").addEventListener("click", showHeaderMenu, false);
            }
            function showHeaderMenu() {
                var title = document.getElementById("titlecontainer");
                var menu = document.getElementById("headerMenu").winControl;
                menu.anchor = title;
                menu.placement = "bottom";
                menu.alignment = "left";
                document.getElementById("copyItem").addEventListener("click", function () { goToSection("copy"); }, false);
                document.getElementById("changeColorItem").addEventListener("click", function () { goToSection("changeColor"); }, false);
                menu.show();
            }
            function goToSection(section) {
                if (section == "changeColor") {
                    document.getElementById("titlecontainer").style.backgroundColor="green";   
                }
                if (section == "copy") {
                    var text = document.getElementById("titlecontainer").innerHTML;
                }
            }
        </script>
    
    
    
    
    <body onload="pageloaded()">
        <p>Content goes here</p>
        <span id="titlecontainer">click on me to see what happen</span>
        <div id="headerMenu" data-win-control="WinJS.UI.Menu">
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'copyItem',label:'Copy'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'changeColorItem',label:'ChangeColor'}"></button>
        </div>
    </body>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, August 26, 2014 5:13 AM
    Moderator
  • Thanks James for your work. I am aware of how to do it programmtically. I wondered if there is an automated way to have *all* spans being copyable (via context menu).
    Tuesday, August 26, 2014 8:15 AM
  • >> I wondered if there is an automated way to have *all* spans being copyable (via context menu).

    I'm afraid not. Maybe go through the whole HTML and fetch the span contents.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, August 27, 2014 7:55 AM
    Moderator