Html Phonegap 样式 -webkit-user-select: none; 禁用文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12812587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Phonegap styles -webkit-user-select: none; disabling text field
提问by botbot
I'm pretty new to Phonegap. I have a problem where the default css used in a clean Phonegap project won't allow input into text fields. I narrowed it down to one line of CSS:
我对Phonegap很陌生。我有一个问题，在干净的 Phonegap 项目中使用的默认 css 不允许输入文本字段。我把它缩小到一行 CSS：
* {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
The problem line is:
问题线是：
-webkit-user-select: none;
This can be found in www/index.css.
这可以在 www/index.css 中找到。
Seems like completely disabling the input field isn't the desired effect.
似乎完全禁用输入字段并不是想要的效果。
I've also posted this problem 2 times before but it was closed, not sure why... My issue was closed due to not being a common problem. Well, all I can say about that is, I guess some users at stackoverflow don't think CSS 3, Phonegap, HTML 5, and -webkit-user-select: is a common situation. I'd beg to differ.
我之前也发布过这个问题 2 次，但它被关闭了，不知道为什么......我的问题由于不是一个常见问题而被关闭。好吧，我只能说，我猜 stackoverflow 的一些用户不认为 CSS 3、Phonegap、HTML 5 和 -webkit-user-select: 是一种常见情况。我不同意。
However I can see this issue also posted here, also causing problems in Safari: User select:none causes input field to be inaccessible on SafariAlthough slightly different.
但是我可以看到这里也发布了这个问题，也会导致 Safari 出现问题：用户选择：无导致输入字段在 Safari 上无法访问，尽管略有不同。
My current solution is this:
我目前的解决方案是这样的：
-webkit-user-select: text; /* change 'none' to 'text' */
Just still curious as to what is the most elegant solution to enable the text input, but still maintain some of this copy and past functionality that Phonegap is trying to achieve. Thanks!
只是仍然好奇启用文本输入的最优雅的解决方案是什么，但仍然保留 Phonegap 试图实现的一些副本和过去的功能。谢谢！
回答by Scott Thiessen
Try adding this to your css:
尝试将其添加到您的 css 中：
input {
-webkit-user-select: auto !important;
}
This will override the text selection disabling that you have set on every single element (via the * selector) for input fields.
这将覆盖您为输入字段在每个元素上设置的文本选择禁用（通过 * 选择器）。
回答by Anton Taranovskyi
Just add rules to css in this way:
只需以这种方式向css添加规则：
*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
回答by Sarath
user-selectcan cause issues in elements with contenteditable="true" so better to add that too
user-select可能会导致 contenteditable="true" 元素出现问题，所以最好也添加它
[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;
}
