Copy and paste not working on read only fields

[Paul Lynch]

Strange one, but when I set a field to read only.

Specifically a Note (or Multi line text box)

I cannot highlight and copy the text, it’s unselectablel, I can highlight it but it immediately stops being highlighted?

Is there any function or css I can use to reverse this for that specific field?

[Paul Lynch]

I know there is the user-select css property.

user-select value

none – user cannot select the text
text – user can select the text
all – user can select the text with one click
auto – user-select value depend upon its parent user-select option
contain – selection will be bound to particular element
element – IE version of user-select contain.

I can stop it being highlighted using “none”, but setting it to “text” even using !important, will not force it to allow me to keep it highlighted.

[Alexander Bautz]

Hi,
I’m not able to recreate this issue – which browser are you using?

Alexander

[Paul Lynch]

Using Chrome (and it is editform) display form is ok.
Version 84.0.4147.105 (Official Build) (64-bit)

Did just try Firefox and IE11 and exactly same outcome.

This is on any form. Removed all css and turned off the border and shading in the MISC tab. So forms are pretty basic.

Single line of text and choice fields are also ok, just multi line of text fields (these are enhanced rich text).

Actually I just changed the fields from enhanced rich text to plain text and it fixes it too. So it is only with “Enhanced Rich Text”.

[Alexander Bautz]

Thanks for the detailed description – I have now recreated it and found that is was caused by a mouseup event in the SharePoint built in code that automatically moved focus to the now hidden input area when you set focus by clicking the table cell containing the readonly text.

I have fixed this in the upcoming release by overriding this event when the field is readonly.

To workaround this while you wait for the new version you can add this to your custom js:

jQuery("#dffs_YOUR_FIELD_NAME td.ms-formbody").on("mouseup", function(event) {
    if(jQuery(event.target).parents(".dffs-readonly-inner").length > 0){
        event.preventDefault(); 
        event.stopPropagation(); 
        return false;
    }
});

Replace YOUR_FIELD_NAME with your internal field name.

Alexander

[Paul Lynch]

Thanks Alexander this works great

• This reply was modified 4 years, 4 months ago by Paul Lynch.

[Author]

Posts