1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    WEBcast is on a distinguished road

      0  

    Default Unanswered: How to enable text selection for Container/Component?

    Unanswered: How to enable text selection for Container/Component?


    Hi,

    I need to enable, for a container, text selection in Sencha Touch 2.

    I was trying to add the style "-webkit-user-select: text; -webkit-touch-callout: default;" but didn't work.

    I'm suspecting the tap event is blocked or something like that...

    I don't want to use a input text because is popping up the keyboard.

    Anyone has any idea how can I be able to tap in a container and to select the text?

    Thanks.
    Track your car expenses, get cheapest prices for fuel and avoid traffic jams in Austria
    http://auto.wien.ro/

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,643
    Answers
    3453
    Vote Rating
    816
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sencha Touch doesn't support text selection currently. This is due to some events being captured also in a scrollable container text selection would not give a good user experience.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    WEBcast is on a distinguished road

      0  

    Default


    mitchellsimoens, I'm agree with you, in a scrollable container text... but having the option to disable scrolling I'm sure there is a way to bubble/propagate the tap event and to enable text selection.

    If in the current framework there is no option to enable the text selection it should be implemented because some times user needs are different from original design and you should not constrain the user.

    What I want to know is what function I should overwrite to propagate the tap event for selection

    On Ext.viewport.Default I was trying to configure isInputRegex with a custom html tag "selectable" but this trick didn't work.

    Code:
    isInputRegex: /^(input|textarea|select|a|selectable)$/i,
    and to have a container with

    Code:
    html: "<selectable style='-webkit-user-select: text; -webkit-touch-callout: default;'>Let me select this on tap</selectable>"
    I'm sure there are ways to do it and at the end I will enable this but I want to do It as clean is possible, with less possible hacks into framework.

    Thanks.
    Track your car expenses, get cheapest prices for fuel and avoid traffic jams in Austria
    http://auto.wien.ro/

  4. #4
    Sencha User Surinder singh's Avatar
    Join Date
    May 2009
    Location
    India
    Posts
    38
    Vote Rating
    0
    Surinder singh is on a distinguished road

      0  

    Default we can make -webkit-user-select working in this way

    we can make -webkit-user-select working in this way


    Thanks WEBcast, you have given me a direction, and here it is how it works for me

    add the css, then add the "userSelectable" class on element/div/component

    Code:
    .userSelectable *{-webkit-user-select:text !important;}

    then add this override before building the application

    Code:
    Ext.override(Ext.viewport.Default, {
        doPreventZooming: function(e) {
            // Don't prevent right mouse event
            if ('button' in e && e.button !== 0) {
                return;
            }
    
    
            var target = e.target;
            //_dir(window.getComputedStyle(target, null).webkitUserSelect)
            var webkitUserSelect = window.getComputedStyle(target, null).webkitUserSelect;
            if (target && target.nodeType === 1 && !this.isInputRegex.test(target.tagName) && webkitUserSelect=='none') {
                e.preventDefault();
            }
        }         
    });
    very soon you will see a working sample on our site (on Sencha Theme builder ) , where we are showing our extensions with sample code.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Location
    Sacramento, California
    Posts
    75
    Vote Rating
    8
    gypsie is on a distinguished road

      0  

    Default


    MUCH appreciated. Worked like charm. And absolutely agree with you that this should be built-in option within Sencha Touch. There should be config for textfield called selectable: true,.

    thanks for posting!