离子2：如何使文字可选？

Question

我希望用户能够选择文本内容（在离子2中），以便他们可以将其复制并粘贴到其他位置，但似乎已禁用文本选择。用户可以选择输入或文本区域中的文本，但我希望他们能够选择常规内容文本。有没有办法重新启用文本选择？

Answer 1

我添加了

body {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

到app.scss文件

对于单个项目，由于这是SCSS，您还可以创建与这4个css行的混合。请记住，Safari或其他浏览器可能无法很好地响应用户选择。

Answer 2

您需要将以下CSS添加到您想要选择的HTML标记

user-select: text;

Answer 3

对于我的Ionic 4项目，使用body标签不起作用，但这确实可行：

* {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

Answer 4

在Ionic 4中添加

* {

    -webkit-user-select: text;
    
    -moz-user-select: text;
    
    -ms-user-select: text;
    
    user-select: text;
    
    }

**到global.scss文件。 ** 但是，如果您只想复制/粘贴特定的标记文本，请在global.scss中添加以下内容：

.selectable {

    -webkit-user-select: text;
    
    -moz-user-select: text;
    
    -ms-user-select: text;
    
    user-select: text;
    
    }

然后将class =“ selectable”属性添加到标记中。

希望有帮助

Answer 5

您不必像其他人一样使用通配符选择器来应用此修复程序。如果在浏览器中使用远程调试，则可以选择任何元素并查找设置其样式的内容。

• 打开开发工具
• 使用Ctrl + Shift + C选择要检查的元素
• 转到计算的标签
• 查找样式，在这种情况下为user-select
• 点击下方的none选项

• 它应该带您到要设置的位置。 html.plt-mobile ion-app是要应用的CSS选择器。现在，您要做的就是在自己的样式表中定位该选择器。

  html.plt-mobile ion-app {
       -webkit-user-select: auto;
       -moz-user-select: auto;
       -ms-user-select: auto;
       user-select: auto;
  }