Prevent text selection for user input within a Cordova application

I've been attempting to prevent users from copying passwords in my Cordova app, even if they try to reveal the password. I haven't been able to find a solution yet. Here's what I've attempted so far:

.password {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

My testing has been conducted on a Samsung S9 device.

Answer №1

There have been reports of compatibility issues with the user-select property. It's possible that your specific device is affected by these known issues. Different browsers may interpret this specification in varying ways.

If you want to ensure a consistent experience, especially within a Cordova application, consider using JavaScript as a workaround to address this issue.

Answer №2

Give this a shot:

$('input').on('copy paste', function(e) { e.preventDefault(); });

If you want to prevent copying as well, add this code:

$('input').on('copy', function(e) { e.preventDefault(); });

Using jQuery should help resolve the issue you are facing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling Angular with FullCalendar - Personalized CSS Design

I'm struggling with custom styling using FullCalendar for Angular. Specifically, I need to change the background color of the 'More Events' Popover, but no matter what I attempt, my styles aren't taking effect. I've been trying to ...

Unable to show inline within web forms application utilizing bootstrap

I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. ...

Is the footer missing from view?

I tried to replicate my header code for the footer, but it doesn't seem to be displaying. I've double-checked everything and can't figure out why it's not working. Maybe there is a typo somewhere. Below are the two sets of code: Heade ...

Having difficulty upgrading from BootStrap 3 to BootStrap 4

Need assistance updating from BootStrap 3 to BootStrap 4 on my local server. After trying to update, I ended up with a result that still reflects BootStrap 3. https://i.sstatic.net/Bs9H0.jpg Here's the code snippet I used for linking: <link rel=& ...

Increase transparency of scrollbar background

Is it possible to adjust the opacity of a scrollbar track? I attempted to use opacity:0.5, but it didn't have any effect. I am using material UI styled, although I don't believe that is causing the issue. const Root = styled('div')(({ ...

Retrieving information from a MySQL database and populating a Spinner with the data using a PHP web service that

Can you provide me with a simple demonstration of retrieving data from MySQL and populating a Spinner using a PHP web service that returns JSON? ...

Comparison of button text alignment: stacking vs inline placement

I currently have a button on my webpage labeled "Learn More." Unfortunately, the text on the button is not lining up as it should. Instead of flowing in a line, the text seems to be stacking on top of each other. The HTML code for the button is included ...

Instructions for applying a border style to a dynamically generated table using jQuery

I'm currently working on adding CSS to a table that is generated dynamically when a button is clicked. The function that is triggered on the click event includes the following jQuery code to create the dynamic rows: $("#employeDetail").append('& ...

Scheduled.io() is being utilized to avoid NetworkOnMainThread issues

I've attempted to use Scheduler.newThread() and Scheduler.io(), but I'm still encountering issues. Below is the code snippet: Observable<Response> loginObservable = Observable.create(new ObservableOnSubscribe<Response>() { ...

When an HTML element extends beyond the screen's right boundary, it becomes truncated

My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible ...

What is the best way to horizontally center a child div within its parent container while keeping it fixed at the top?

I am struggling to center a child div horizontally within its parent div while also fixing it to the top of the parent. I have tried various approaches in CSS, but so far I haven't been successful :-( I can either center it or fix it to the top, but w ...

WebView Direct Download generates HTML content with the same file extension as the original file

My goal is to enable a direct download functionality within the WebView, bypassing the need to redirect to an external browser. webview.setDownloadListener(new DownloadListener() { @SuppressLint("DefaultLocale") @Override public void onDownloa ...

Disabling background music from other Java applications

I'm currently creating an app where background music starts from the main page. However, I'm struggling to figure out how to deactivate it when a user begins learning. Is there a way for me to remotely disable the background music from a separat ...

Is it possible and advisable to compress the css within an email?

Recently, I've integrated into my website for email campaigns. I'm curious to know if it's possible to minify the CSS code in emails to just one line, or if it's better to leave it as is? ...

What is the best way to rearrange the order of navbar items when working with two nav bars and a single toggle in bootstrap 4?

I am looking to implement a design with two navigation bars that share a single toggle. The first navbar should include the logo, email icon, and a search box, while the second navbar is reserved for additional links. On smaller screens, when the toggle ...

Problems with Here Maps SDK on Android version 6.0

Encountering difficulties with displaying Here Maps (SDK version 3.0.2) on Marshmallow devices. The app is designed for Marshmallow, utilizing the new Permission System. Despite all permissions being granted, the map initialization fails with the MISSING ...

Expanding unordered list with dual columns upon hovering

Could you possibly assist me with creating a unique navigation effect for my new website? I am aiming to achieve an expandable two-column menu on hover of a parent list item that contains a sub-list. So far, I have made some progress in implementing this ...

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

Every time I attempt to press the button, my application immediately crashes

As a beginner in the world of coding, I decided to take a leap into the unknown without much prior knowledge. However, I am facing an issue with my button not opening a new activity when clicked; instead, it crashes every time. When running it on my Genymo ...

The left-floated image extends beyond the boundaries of the div

I have a situation where text and an image are combined but the cat image goes outside of the parent div. Is there a solution to this issue? View the code here <div style="border:1px solid #CCCCCC"> <img style="float: left;" src="http://plac ...