How to make HTML Text unselectable for inputs

Question

I have been trying to make some text within an input of my HTML unselectable in angular. I have refered to previous questions like make html text unselectable

The text currently is a code that I don't want my users to copy it before I allow it.

using this CSS works with most html elements, but not with my input.

I have tried with user-select none

Any ideas?

Thanks

.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

Try to change your css to:

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

You can use this simple js to prevent cut copy paste in your input field. digita-code should be the own class for your input field.

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

Answer 3

I was able to achieve this by using a JS approach It looks kinda dirty, but it will work for now. I will refactor it in a few days, but if someone wants to see the answer:

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

This should work (notice the *):

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

Answer 5

use css: (works perfect)

>     .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