Mobile custom pop-up keyboard, although the original input pop-up is prohibited, but the bottom will pop up a complete, how to remove this completion?

Mobile custom pop-up keyboard, although the original input pop-up is prohibited, but the bottom will pop up as complete, how to remove this completion?

     <div>
        <input type="text" v-model="mes" readonly="readonly"/>
        <dsadasd :show="showIS" @typing="typing"></dsadasd>
    </div>

my effect picture is like this

clipboard.png
input

clipboard.png

how can the completion of the black background below be removed?

Dec.06,2021

The problem with

is that readonly can receive focus, so the system prompt that comes with input pops up. The
readonly attribute specifies that the input field is read-only. Read-only fields cannot be modified. However, users can still use the tab key to switch to the field, get focus, and select or copy its text.
solution 1. Instead of input, use div instead of input

  1. manual out-of-focus blur after input focus
Menu