locked
Disable text selection and context menu

    Question

  • Is there a way to disable text selection and context menu in HTML5/JS metro style apps?
    Friday, November 04, 2011 1:08 AM

Answers

  • Hey Ghost,

    The Context Menu Sample shows how to disable the context menu.  It disables the context menu and then shows a custom one.  You would just disable it however.  Note: if you disable selection for all of your items, there is not context menu however.

    If you want to disable selection for the entire document you could do this:

    1. add a selection handler for the entire body: document.body.addEventListener('selectstart', selectionHandler, false);
    2. in the handler cancel the default behavior: function selectionHandler(e) { e.preventDefault(); }

    If you want to see how selection is handled by default, you can look into the ui.js file and search for selection handler.  Put a breakpoint in there and see what happens.  By default selection is enabled for TEXTAREA and INPUT and if the element (or any parent up the chain) has the 'data-win-selectable' attribute set to true or the contentEditable property of true.

    You can of course with this knowledge enable or disable selection as you wish in your app!

    -Jeff


    Jeff Sanders (MSFT)
    Friday, November 04, 2011 2:00 PM
    Moderator

All replies

  • Hey Ghost,

    The Context Menu Sample shows how to disable the context menu.  It disables the context menu and then shows a custom one.  You would just disable it however.  Note: if you disable selection for all of your items, there is not context menu however.

    If you want to disable selection for the entire document you could do this:

    1. add a selection handler for the entire body: document.body.addEventListener('selectstart', selectionHandler, false);
    2. in the handler cancel the default behavior: function selectionHandler(e) { e.preventDefault(); }

    If you want to see how selection is handled by default, you can look into the ui.js file and search for selection handler.  Put a breakpoint in there and see what happens.  By default selection is enabled for TEXTAREA and INPUT and if the element (or any parent up the chain) has the 'data-win-selectable' attribute set to true or the contentEditable property of true.

    You can of course with this knowledge enable or disable selection as you wish in your app!

    -Jeff


    Jeff Sanders (MSFT)
    Friday, November 04, 2011 2:00 PM
    Moderator
  • Jeff,

    JS trick worked like a charm - text on the control is not selectable as I want it to be.

    However it seems as if I'm missing something in your explanation of data-win-selectable:

    1) Visual Studio seems to be unaware of it as far as intellisense is concerned.

    2) According to your explanation text in the HTML below should be unselectable because it is neither TEXTAREA nor INPUT and no elements have data-win-selectable or contentEditable set. Yet they are. Here's the code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App</title>
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
        <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
        <script src=”/winjs/js/ui.js”></script>
        <script src=”/winjs/js/binding.js”></script>
        <script src=”/winjs/js/controls.js”></script>
        <script src=”/winjs/js/animations.js”></script>
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div id="background">
            <video src="video/bg.mp4" loop="loop"/>
        </div>
        <div id="appContainer">
            <div id="navigation" class="module">
                <div id="title">Current</div>
                <div id="clock">12:00</div>
            </div>
            <div id="data">
                <div id="data1" data-win-control="WinJS.UI.FlipView">
    
                </div>
            </div>
        </div>
    </body>
    </html>

    I know that this is more of a philosophical question, but IMHO "selectability" is appearance rather than behavior so ideally I would like to be able to control it via HTML/CSS rather than JS that runs on start up.


    Friday, November 04, 2011 6:23 PM
  • Hi Ghost,

    In HTML you can add anything you want as an attribute.  So 'data-win-selectable' is simply an attribute that the WinJS code can use for visibility.

    Also <div> is a TEXTAREA so that is why it is selectable.  You can totally control this by HTML by adding a selection handler and looking for that attribute!  That is the beauty of the WinJS library, if you see something you like you can extend it!

    For example, lets say you wanted to only be able to select things that have the 'data-win-selectable' attribute set (or whatever you want to call it).  Your select handler could look something like this then:

      function selectionHandler(e) {
            if (!isSelectable(e.srcElement)) {
                e.preventDefault();
            }
        }

     

    function isSelectable(elem) {
        if ((elem.hasAttribute('data-win-selectable') && elem.getAttribute('data-win-selectable') === 'true'){
                    return true;
                }
    return false;
    }

     

    Also, play around in the debugger and see how isSelectable works by default.  You will be able to see for yourself how this selection mechanism works and learn how to change it to fit your needs.

     

    -Jeff


    Jeff Sanders (MSFT)
    Friday, November 04, 2011 6:47 PM
    Moderator
  • Jeff,

    Thank you for clarifying it.

    So just to confirm - there is no pure HTML/CSS way to make <div> contents "unselectable". I have to subscribe to 'selectstart' event to change default behavior. Correct?

    Friday, November 04, 2011 7:31 PM
  • Correct!

    This is true for HTML in general.

    -Jeff


    Jeff Sanders (MSFT)
    Friday, November 04, 2011 7:35 PM
    Moderator