Disabling text selection in PhoneGap

A

9

33

Is it possible to disable text selection to make a PhoneGap app more similar to normal native app?

Something like this:

document.onselectstart = function() {return false;}

or:

* { 
user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}

Or many other things don't work.

Arjan answered 5/8, 2012 at 22:45 Comment(0)

E

32

I looked all over for help on this. This finally worked for me.

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html");

        super.appView.setOnLongClickListener(new View.OnLongClickListener() {

            public boolean onLongClick(View v) {
                return true;
            }
        });
    }
}

The setOnClickListener is what does the magic. Make sure you put this AFTER your call to super.loadUrl.

Of course, this will disable text selection for your entire app, but I'm OK with that, and I don't have any other way around it for now.

I'm not sure of the complete implications of this yet, but I do make use of the JqueryMobile event "taphold", and it still works fine. I believe this works by handling the long click on the appView (which hosts your HTML app) and preventing it from bubbling up.

Entrap answered 8/8, 2012 at 20:31 Comment(4)

Thanx it works! Don't forget to add it after the loadUrl otherwise appView might be null. – Janes 10/12, 2012 at 18:34

for me i have to insert one more line with all this code is: super.appView.setLongClickable(false); then this solution works for me. – Aplite 26/6, 2013 at 4:32

How do you enable text selection though? I don't see the default behavior of WebView to allow text selection and some default context-menu for it... – Textile 29/7, 2015 at 22:59

I got Cannot resolve method 'setOnLongClickListener' in 'CordovaWebView' in Cordova – Calorific 22/6, 2021 at 8:57

S

60

Putting it on html, not *, works for me:

html {
    -webkit-user-select: none;
}

Snowfall answered 6/8, 2012 at 6:53 Comment(2)

This was the fix I needed to make it work on WP8. Was working fine on iOS and Android without the 'html' – Sunlit 30/4, 2016 at 20:33

html { user-select: none;} – Gorden 21/4, 2022 at 18:22

E

32

I looked all over for help on this. This finally worked for me.

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html");

        super.appView.setOnLongClickListener(new View.OnLongClickListener() {

            public boolean onLongClick(View v) {
                return true;
            }
        });
    }
}

The setOnClickListener is what does the magic. Make sure you put this AFTER your call to super.loadUrl.

Of course, this will disable text selection for your entire app, but I'm OK with that, and I don't have any other way around it for now.

I'm not sure of the complete implications of this yet, but I do make use of the JqueryMobile event "taphold", and it still works fine. I believe this works by handling the long click on the appView (which hosts your HTML app) and preventing it from bubbling up.

Entrap answered 8/8, 2012 at 20:31 Comment(4)

Thanx it works! Don't forget to add it after the loadUrl otherwise appView might be null. – Janes 10/12, 2012 at 18:34

for me i have to insert one more line with all this code is: super.appView.setLongClickable(false); then this solution works for me. – Aplite 26/6, 2013 at 4:32

How do you enable text selection though? I don't see the default behavior of WebView to allow text selection and some default context-menu for it... – Textile 29/7, 2015 at 22:59

I got Cannot resolve method 'setOnLongClickListener' in 'CordovaWebView' in Cordova – Calorific 22/6, 2021 at 8:57

D

9

this will work too.

<body oncontextmenu="return false" ondragstart="return false" 
onselectstart="return false">

Dehydrogenate answered 26/3, 2014 at 13:21 Comment(1)

This is the most elegant solution so far, works on Android 6 and Cordova 6.5.0. – Afferent 5/5, 2017 at 1:25

S

8

As well as what ThinkingStiff mentioned I also use the following to remove any highlighting/copy & paste

-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);

Skillet answered 6/8, 2012 at 13:14 Comment(1)

Now there is no highlight, after one click, but if I hold point, text selection tool will open. How can I block it? :/ – Arjan 6/8, 2012 at 17:33

B

6

Add this and enjoy. Works on iOS as well.

<style type="text/css">
*:not(input,textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/Copy of UIWebView */
}
</style>

Barbary answered 14/10, 2015 at 5:56 Comment(1)

minor correction, the signing of the rule should be: *:not(input):not(textarea) – Jsandye 21/3, 2016 at 22:29

T

1

I used below code and its working fine on Android and iOS devices as well as on emulator/simulator:

 * {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

   input, textarea {
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
    }

Thistly answered 4/9, 2017 at 3:59 Comment(0)

M

0

Recently updated to Android 4.4 kitkat and it resolved the problem of Edittext showing up on taphold (long press). Apparently edittext doesn't showup on taphold with jquery mobile and phonegap on android 4.4. I am using a custom aosp rom so haven't tested on an official release but am guessing (and hoping) it should work as well for any 4.4 release. It also seems to resolved other conflicts I was having with onclick which I posted below.

Older method I found that works (with possible issues) for older ICS roms (only tested on 4.0.4 custom rom).
By adding a scrollbar

example:

<div id="scroll">content</div> 

<style>
#scroll {

height: 100%;
width: 100%;
}
</style>

It disables the EditText from popping on taphold (long press) for phonegap and jquery mobile as well. Not sure yet if this will cause any conflicts (as seems to have some effects with onclick which am looking at sorting out) but with regular text should work well.--- Issues sorted out with Android 4.4 and no need for scroll either anymore. (see top of post)

Malpractice answered 24/4, 2014 at 17:2 Comment(0)

B

0

For me this was the best:

-webkit-tap-highlight-color: rgba(0,0,0,0); 
tap-highlight-color: rgba(0,0,0,0);

My case happened with pixi.js, with

plugins.interaction.autoPreventDefault = true;

Bikol answered 26/9, 2016 at 15:4 Comment(0)

M

-1

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
}

[contenteditable="true"] , input, textarea {
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    -o-user-select: auto !important;
    user-select: auto !important;  
}

Mcdevitt answered 23/4, 2017 at 20:27 Comment(1)

Please add explanation with your answer, which can be helpful to others in the future. How to Answer – Siriasis 23/4, 2017 at 21:51

Recommended topics

Hot tags