I have a rich text editor (summer note), and on ios it's almost impossible to do anything. As you select any text you get the ios popup that never goes away. How to prevent it?
One option is to use user-select like this:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
However, it will disable text selection altogether. I just want to hide the options pop up.
Thanks a lot.
Related
I tried this way. but it's not working. I am using antd UI library
.copy-item-input .ant-input[disabled] {
cursor: pointer !important;
user-select: none;
I'm developing a web-app for both Android and iOS.
I have encountered a problem with the styling of the app.
For some reason, styles applied to a <select> won't display on MobileSafari (aka iOS WebView)
CSS:
p,
input,
select,
option,
button {
font-family: Arial, ArialHebrew, sans-serif;
font-size: x-large;
text-align: center;
color: #FFF;
margin: 1vh;
padding: 1vh;
}
input,
select,
option,
button {
background-color: #333;
border-radius: 1vh;
border-color: transparent;
}
How i want it to look (Chrome, Android):
How it looks (MobileSafari, iOS):
What do i need to change in my CSS to apply the style to the <select>?
The quick & easy fix is to apply -webkit-appearance: none. However, you might quickly notice your element has lost the arrow to indicate it's a <select> element.
To address this, one workaround is to wrap your element with a div and mimic the arrow using CSS content.
Here's a Fiddle: http://jsfiddle.net/d6jhpo7v/
And the fiddle in iOS simulator:
I developed an mgwt,gwt-phonegap app and I installed it in ios device. I want to disable the cut ,copy and paste options to my text fields.
Is there any chance to do it through css? if not please provide me solution to achieve it.
This disable the copy / paste for everything except input :
*{
-webkit-touch-callout: none;
-webkit-user-select:none;
}
input {
-webkit-touch-callout: auto !important;
-webkit-user-select: auto !important;
}
You can use it to target your text fields only.
I have a phone gap/cordova application. I have a view that has a link, 2 textfields and text.
I want to remove copy,paste and select option from the web view.
Using:
[webView stringByEvaluatingJavaScriptFromString:#"document.body.style.webkitTouchCallout='none';"];
[webView stringByEvaluatingJavaScriptFromString:#"document.body.style.webkitUserSelect='none';"];
I was able to disable copy paste and select menu from web view, but it still lingers in the input fields , i.e textfields.
What i tried was to disable long press on the webview , that disable the magnify glass and as a result disables copy and paste menu, but the menu occurs while we double tap on the textfield too. How can i disable both long press and double taps on the webview?
I am bit confused whether my app will clear the review process for app store if i disable the magnify glass.
Please help me get a solution to this.
I think this has been discussed elsewhere but what ended up working for me was adding the following to the css.
/******************
disable select touch and hold and highlight colors
******************/
html {
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
and if you still want it to work for input then
I added
input {
-webkit-user-select: auto !important;
-webkit-touch-callout: default !important;
}
Thanks to Phonegap styles -webkit-user-select: none; disabling text field
Use this.
<style type="text/css">
*:not(input):not(textarea) {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
</style>
If you want Disable only anchor button tag use this.
a {-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
I wonder why you want to remove copy & paste functionality: Security concerns? If you want keep text selection and copy & paste within your application BUT you want to prevent people to copy&paste your content to other apps then check out Cordova plugin cordova-disable-copy-paste
I am trying to find a way to be able to restrict text selection within the entire PhoneGap application. Anyone know a way to do this?
this will work for you:-
<style type="text/css">
*:not(input):not(textarea) {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
</style>
Using java script:-
document.documentElement.style.webkitTouchCallout = "none";
document.documentElement.style.webkitUserSelect = "none";
html {
-webkit-user-select: none;
}
this little ingredient in your css code will do the magic!
In iOS 9 there is a bug which makes the -webkit-user-select: none; not work. There is a plugin which fixes this
https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix
Thanks to Frederik Wessberg https://stackoverflow.com/a/32737049/741850