Как сделать HTML-текст невыбираемым для ввода

Question

Я пытался сделать некоторый текст на входе моего HTML невыбираемым в угловом формате. Я ссылался на предыдущие вопросы, такие как сделать HTML-текст невыбираемым

В настоящее время текст является кодом, и я не хочу, чтобы мои пользователи копировали его, прежде чем я позволю.

использование этого CSS работает с большинством HTML-элементов, но не с моим вводом.

Я пробовал с пользовательским выбором none

Есть идеи?

Спасибо

.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. Это выглядит немного грязно, но пока это будет работать. Я проведу рефакторинг через несколько дней, но если кто-то захочет увидеть ответ:

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 3

Вы можете использовать эту простую js, чтобы предотвратить копирование вставки в поле ввода. Цифровой код должен быть собственным классом для вашего поля ввода.

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