How to make readonly attribute work on mobile phones?

Question

I have input <input class="form-control" readonly> .

In desktop browsers, I get the expected behavior: input cannot be pressed / focused.

But on mobile phones (currently only tested on iOS / Safari), I get the following behavior when I press an input field:

As you can see, several things are happening. The text cursor is displayed in the input field, the application is scaled, the bottom bar is displayed. How can I prevent the input element from getting focus like this on mobile phones?

EDIT: The proposed duplicate does not solve my problem.

Answer 1

If you just want to avoid any interactions with a particular HTML element, try the following:

 /* CSS */ .__readonly { pointer-events: none; } 

And in HTML:

 <!-- HTML --> <input class="form-control __readonly" readonly />