Phonegap样式 -webkit-user-select: none; 禁用文本字段

11 浏览
0 Comments

Phonegap样式 -webkit-user-select: none; 禁用文本字段

我对Phonegap还比较陌生。在一个干净的Phonegap项目中，使用的默认CSS不允许在文本字段中输入。我将问题缩小到一行CSS代码：

* {
            -webkit-touch-callout: none;                /* 防止点击并保持时拷贝图像等操作的弹出菜单 */
            -webkit-text-size-adjust: none;             /* 防止Webkit调整文本以适应 */
            -webkit-tap-highlight-color: rgba(0,0,0,0); /* 使链接选择透明化，调整最后一个值的不透明度从0到1.0 */
            -webkit-user-select: none;                 /* 防止复制粘贴，要允许，请将'none'更改为'text' */
    }

问题出在这行代码上：

-webkit-user-select: none;

这段代码可以在www/index.css中找到。

看起来完全禁用输入字段并不是期望的效果。

我之前也发布过这个问题两次，但被关闭了，不知道为什么...我的问题被关闭是因为不是常见问题。对此我只能说，我猜测一些stackoverflow的用户认为CSS3、Phonegap、HTML5和-webkit-user-select:不是常见情况。我持不同意见。

不过，我还看到这个问题在这里也有人发布，也在Safari中引起问题： User select:none causes input field to be inaccessible on Safari 尽管有些不同。

我目前的解决方案是这样的：

-webkit-user-select: text; /* 将'none'更改为'text' */

我仍然好奇如何以最优雅的方式启用文本输入，同时仍然保留Phonegap试图实现的一些复制粘贴功能。谢谢！

0

3 答案

0 Comments

问题出现的原因是在Phonegap中，禁用文本字段时，使用了样式-webkit-user-select: none;，但是这个样式在iOS上不起作用。

解决方法是在css中添加以下规则：

*:not(input):not(textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

这种方法比目前被接受的答案更好，因为它不使用!important。然而，在CSS3中，:not()只能以简单选择器作为参数（在CSS4中，:not()将能够以选择器列表作为参数）。所以在CSS3中，应该使用*:not(input):not(textarea) {。

对于我来说，在iOS上（使用PhoneGap构建），*:not(input):not(textarea) {...}和*:not(input,textarea) {...}都没有解决任何问题，但SCCOTTT对我起作用。

0
0 Comments

问题出现的原因是通过 * 选择器对所有元素设置了禁用文本选择的样式，导致无法在 input 字段中选择文本。解决方法是在 CSS 中添加以下代码：

input {
    -webkit-user-select: auto !important;
}

这样可以覆盖使用 * 选择器禁用文本选择的样式，从而允许在 input 字段中选择文本。

0
0 Comments

问题原因：-webkit-user-select属性可能会导致在具有contenteditable="true"的元素中出现问题。

解决方法：

在CSS中添加以下代码：

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

通过添加上述代码，可以解决在iPad的Safari和Chrome浏览器中出现的问题。

0