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>

Didn't you forget to assign you css class `.digital-code` to the input? — Denis O., Oct 01 '19 at 19:54

score 1 · Answer 1 · answered Oct 01 '19 at 19:57

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

score 0 · Answer 2 · answered Oct 01 '19 at 20:15

0

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

answered Oct 01 '19 at 20:15

Sayedur Rahman

171
8

This didn't work for me. I'm still able to perform those actions. I don't have Jquery so this is what I tried.(changed ID for class btw) ngAfterViewInit() { var el = this.elementRef.nativeElement.querySelector('.digital-code'); el.addEventListener('cut copy paste click', (e) => e.preventDefault()); } – Koni Oct 02 '19 at 14:05

score 0 · Accepted Answer · answered Oct 03 '19 at 15:03

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());

score 0 · Answer 4 · edited Apr 09 '20 at 21:31

0

This should work (notice the *):

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

edited Apr 09 '20 at 21:31

Paul Roub

36,322
27
84
93

answered Apr 09 '20 at 21:27

Sergiu

1,397
1
18
33

How to make HTML Text unselectable for inputs

4 Answers4