如何使 HTML 文本不可选择用于输入

Question

我一直在尝试使 HTML 输入中的某些文本在角度上无法选择。 我参考过之前的问题，例如 make html text unselectable

当前文本是一段代码，我不希望我的用户在我允许之前复制它。

使用此 CSS 适用于大多数 html 元素，但不适用于我的输入。

我尝试过用户选择无

有什么想法吗？

谢谢

.digital-code {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

<div fxLayout="row">
        <div fxLayout="column" fxFill>
          <mat-form-field appearance="fill">
            <mat-label>{{ digitalSealCodeTitle }}</mat-label>
            <input [readonly]="true" #sealCode matInput [value]="digitalSealCode" />
            <mat-icon matSuffix (click)="copyValue(sealCode)" matTooltip="Copy">file_copy</mat-icon>
          </mat-form-field>
        </div>
      </div>

Answer 1

尝试将你的CSS更改为：

input[readonly] {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

Answer 2

您可以使用这个简单的js来防止在输入字段中剪切复制粘贴。 digital-code 应该是您的输入字段自己的类。

$('.digital-code').bind("cut copy paste",function(e) {
    e.preventDefault();
});

Answer 3

我能够通过使用 JS 方法来实现这一点 它看起来有点脏，但现在可以用了。几天后我会重构它，但如果有人想看到答案：

var digitalCodeElement = this.elementRef.nativeElement.querySelector('.digital-code');
      digitalCodeElement.addEventListener('contextmenu', e => e.preventDefault());
      digitalCodeElement.addEventListener('copy', e => e.preventDefault());
      digitalCodeElement.addEventListener('paste', e => e.preventDefault());
      digitalCodeElement.addEventListener('cut', e => e.preventDefault());

Answer 4

这应该有效（注意*）：

.row .column * {
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
}

Answer 5

使用CSS：（完美）

>     .protected {
>         user-select: none;
>       }
> 

@angular-devkit/architect       0.1700.9 
@angular-devkit/build-angular   17.0.9 
@angular-devkit/core            17.0.9 
@angular-devkit/schematics      17.0.9 
@angular/cdk                    17.1.0 
@angular/cli                    17.0.9 
@angular/flex-layout            15.0.0-beta.42 
@angular/material               17.1.0 
@schematics/angular             17.0.9 
rxjs                            7.5.7 
typescript                      5.2.2