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

Question

我对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' */

    }

问题在于:

-webkit-user-select: none; 

这可以在www/index.css中找到.

似乎完全禁用输入字段不是所需的效果.

我之前已经发布了这个问题2次,但它已经关闭,不知道为什么......我的问题因为不是常见问题而被关闭了.好吧,我所能说的就是,我想stackoverflow的一些用户不认为CSS 3,Phonegap,HTML 5和-webkit-user-select:是一种常见的情况.我不敢苟同.

但是我可以看到这个问题也发布在这里,也导致Safari出现问题:用户选择:none导致输入字段在Safari上无法访问虽然略有不同.

我目前的解决方案是:

-webkit-user-select: text; /* change 'none' to 'text' */

仍然很好奇是什么是启用文本输入的最优雅的解决方案,但仍然保持Phonegap试图实现的一些副本和过去的功能.谢谢!

Answer 1

尝试将此添加到您的CSS:

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

这将覆盖您在输入字段的每个元素(通过*选择器)上设置的文本选择禁用.

Answer 2

只需以这种方式向css添加规则:

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

Answer 3

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