I encountered a problem in the afternoon, the input on the mobile terminal could not be input, and later found that it was
－webkit－user-select ：none ;
In mobile development, we sometimes write some special resets, such as:
＊ {
-webkit - touch - callout: none;
//-webkit-touch-callout:none; Prevent the behavior of calling out the menu prompt to copy after long-pressing the picture
// Disable text resizing for Webkit kernel browsers.
-webkit-text-size-adjust: none;
//Avoid highlighting when clicking a tag or an element that has registered a click event
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
//
//Prohibit users from copying.Select.
-webkit-user-select: none;
}
Among them, -webkit-user-select: none; will cause some problems.
This is a bug under the webkit kernel browser, you can refer to this article for details: https://bugs.webkit.org/show_bug.cgi?id=82692
The user's content selection behavior is blocked, which will cause some "content editable" tags to not work properly, such as input and testarea.
If the site does not need to prevent the user's selection behavior, the following styles can be used:
* {
-webkit-user-select: text;
-user-select: text;
}
another way:
*: not(input, textarea) {
-webkit - touch - callout: none;
-webkit - user - select: none;
}
user-select , can cause issues in elements with contenteditable="true" ,so better to add that too .
So, it's better to add it as well.
Final code:
[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;
}
The content of this article is probably so much, welcome to communicate, welcome feedback, if there is any error, please correct it, thank you for reading.
Attached reference link:
http://stackoverflow.com/questions/12812587/phonegap-styles-webkit-user-select-none-disabling-text-field