Disabling text selection in PhoneGap

Question

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.

ThinkingStiff · Answer 1 · 2013-11-20T16:33:51.137

60

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

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

edited Nov 20 '13 at 16:33

answered Aug 06 '12 at 06:53

ThinkingStiff

64,767
30
146
239

This was the fix I needed to make it work on WP8. Was working fine on iOS and Android without the 'html' – ED-209 Apr 30 '16 at 20:33
```html { user-select: none;}``` – math_lab3.ca Apr 21 '22 at 18:22

score 32 · Accepted Answer · answered Aug 08 '12 at 20:31

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.

answered Aug 08 '12 at 20:31

habermanm

831
8
8

Thanx it works! Don't forget to add it after the loadUrl otherwise appView might be null. – guya Dec 10 '12 at 18:34
1

for me i have to insert one more line with all this code is: super.appView.setLongClickable(false); then this solution works for me. – Deepika Lalra Jun 26 '13 at 04: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... – android developer Jul 29 '15 at 22:59
I got `Cannot resolve method 'setOnLongClickListener' in 'CordovaWebView'` in Cordova – jinn Jun 22 '21 at 08:57

score 9 · Answer 3 · answered Mar 26 '14 at 13:21

9

this will work too.

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

answered Mar 26 '14 at 13:21

nargil

91
1
1

This is the most elegant solution so far, works on Android 6 and Cordova 6.5.0. – andreszs May 05 '17 at 01:25

score 8 · Answer 4 · edited Jul 31 '14 at 20:18

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);

edited Jul 31 '14 at 20:18

ThinkingStiff

64,767
30
146
239

answered Aug 06 '12 at 13:14

mattdryden

256
1
5

Now there is no highlight, after one click, but if I hold point, text selection tool will open. How can I block it? :/ – stmn Aug 06 '12 at 17:33

score 6 · Answer 5 · answered Oct 14 '15 at 05:56

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>

answered Oct 14 '15 at 05:56

atulkhatri

10,896
3
53
89

6

minor correction, the signing of the rule should be: `*:not(input):not(textarea)` – mtdb Mar 21 '16 at 22:29

Vikasdeep Singh · Answer 6 · 2017-11-15T23:53:19.510

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;
    }

code613 · Answer 7 · 2014-04-29T14:04:33.677

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)

score 0 · Answer 8 · answered Sep 26 '16 at 15:04

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;

answered Sep 26 '16 at 15:04

csomakk

5,369
1
29
34

score -1 · Answer 9 · answered Apr 23 '17 at 20:27

-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;  
}

answered Apr 23 '17 at 20:27

Abdenacer Rachedi

39
4

1

Please add explanation with your answer, which can be helpful to others in the future. [answer] – cosmoonot Apr 23 '17 at 21:51

Disabling text selection in PhoneGap

9 Answers9

Linked

Related