Browser Select All chooses the entire page when a modal window is open

4 posts, 0 answers
  1. Richard
    Richard avatar
    149 posts
    Member since:
    Feb 2012

    Posted 23 Feb 2017 Link to this post

    The entire page, including the non-window content, is selected when a modal window is open and the browser select all (Ctrl-A) is performed.

    Q: Is there a way to have Ctrl-A select only the modal content ?

    Sample is in the Dojo: http://dojo.telerik.com/uzeCA/3

    Thanks,

    Richard

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2053 posts

    Posted 24 Feb 2017 Link to this post

    Hello Richard,

    Selecting the text outside the modal window is a browser behavior that we do not have control over and it is not specific to using the Kendo UI Window. Nevertheless we created a sample dojo, which shows how through custom logic and detecting the Ctrl + A keys press (you can see the following stackoverflow thread) you can select only the text in the window. I hope it's helpful and points you in the right direction.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Richard
    Richard avatar
    149 posts
    Member since:
    Feb 2012

    Posted 24 Feb 2017 Link to this post

    Hi Ivan:

    Thanks for the sample.

    I pursued a css solution and came up with the following that uses unselectable.

    // jQuery extensions for elg
    (function($){
        $.fn.disableSelection = function() {
            return this
                     .attr('unselectable', 'on')
                     .css('user-select', 'none')
                     .on('selectstart', false);
        };
     
        $.fn.enableSelection = function() {
            return this
                     .removeAttr('unselectable')
                     .css('user-select', 'auto')
                     .off('selectstart');
        };
    })(jQuery);
     
     
    function myPreview(title, message, options) {
        if (!options) options = {};
        var config = {
            title: title,
            width: "85%",
            height: "85%",
            scrollable: true,
            modal: true,
            visible: false,
            close: function (e) {
                $('#previewWindow').parent().siblings().enableSelection();
                this.destroy();
            }
        };
        $("<div id='previewWindow'></div>")
        .appendTo("body")
        .kendoWindow($.extend(config, options))
        .data('kendoWindow').content(message).center().open();
     
        $('#previewWindow').siblings().disableSelection();
        $('#previewWindow').parent().siblings().disableSelection();
    }
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2053 posts

    Posted 28 Feb 2017 Link to this post

    Hi Richard,

    I am glad you have found an approach that allows to achieve the desired behavior. Thank you for sharing it.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top