Home » Android » android – Disabling text selection in PhoneGap

android – Disabling text selection in PhoneGap

Posted by: admin April 23, 2020 Leave a comment

Questions:

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.

How to&Answers:

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.

Answer:

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

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

Answer:

this will work too.

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

Answer:

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

Answer:

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>

Answer:

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

Answer:

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)

Answer:

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;

Answer:

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