How do I prevent the keyboard popping up on mobile?

I have a Form with Text Input field set as a Date Picker.

On a mobile device, when you tap on the Input field, both the Date Picker and the keyboard pop-up.

I don’t want the keyboard to pop-up. I can set the Input field as “Readonly” which works (it prevents the keyboard from appearing) BUT the field is then greyed out, and I want it to be white like all the other fields. This is on an SPA page.

I know with CSS I could set

input:read-only { background: white; }

but then any fields that I have purposely set as Readonly will turn white when I want them to be greyed out!

Is there a way to select just Date-Picker fields and set them as white?

input:dmx-date-picker:read-only { background: white; }

perhaps?

can’t you just add a style to it ?

Yes I could add background-color: white; to the Style attribute but I would like to set it once in the CSS file for all instances of a Date Picker throughout the site. I don’t want to worry about missing one as the site gets bigger.

Did you happen to find to solve the above @UKRiggers, I’m in a similar situation…

No not yet. Client has said to concentrate on Desktop view for now.

1 Like