The style problem of full selection of ios hybird text

our project needs to have copy function in a hybird APP, project, but the full selection button in the long press pop-up menu of the system will select all the text and white space on the page and add a highlighted background to these areas, hoping to achieve the effect of selecting all the current elements. Our project also has an H5 version, and the H5 version performs normally.

clipboard.png
clipboard.png

the problem occurred on ios 10 and 11 machines. Trying to use user-select did not resolve

related codes


//message
:not(input), :not(textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

//
.message {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

it is expected that clicking the Select all menu will select the contents of the current element, or if there is any solution to hide the full selection menu, notice that such a problem will not occur in the pop-up menu in Wechat, they should have implemented a pop-up menu. I hope the boss will not hesitate to give us your advice. Thank you very much.

Nov.02,2021

listens to the touch event of the current element, adding a class, to the current messsage, such as is-active . Add the class prepare-select-message to the html element, and then set the following css.

.prepare-select-message, 
.prepare-select-message *,
.prepare-select-message *:before,
.prepare-select-message *:after {
     user-select: none !important;
}

.message.is-active,
.message.is-active:before,
.message.is-active:after {
    user-select: text !important;
}
Menu