0

I have an input that uses the bootstrap color picker. The input happens to be in a scrollable modal, and when it's about under half of the screen on a mobile phone, the virtual keyboard will partially or fully cover the color selector. I've managed to fix this by making the input readonly, since the click event is still triggered and the selector still appears. However I'd still like to let power-users on desktops type their own hex colors if they wish.

Is there any reliable way to make an input readonly only on mobile devices, that allows dynamic loading(input will be loaded via jquery's .load() or .html() if POST)?

Note that I'm aware I can do this by using it as a component, I just want to know if it's possible or not for future reference as well, though I'd prefer the current input-only design. I was very suprised there was nothing on this on SO especially since people had my problem but with the date-picker.

enter image description here

Community
  • 1
  • 1
Cârnăciov
  • 1,169
  • 1
  • 12
  • 24
  • 1
    Have you looked into [using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)? – BDD Nov 30 '16 at 22:11
  • Unfortunately `readonly` is not a CSS property nor can it be applied with CSS, that was my first approach. – Cârnăciov Nov 30 '16 at 22:18
  • @Fantasterei not sure what you mean, you can't type or copy anything into a readonly input. I want it to be a normal input on desktop and readonly on mobile basically, checking if it's a valid color is done at a later time. – Cârnăciov Nov 30 '16 at 23:03
  • @aron9forever: Have a look at my post. – Fantasterei Nov 30 '16 at 23:07

1 Answers1

2

Maybe you could use media-queries and some sort of click-through stuff. Cool thing is, it prevents javascript as well.

Here you go:

document.getElementById('test1').addEventListener('click', function() {
    alert('1');
});

document.getElementById('test2').addEventListener('click', function() {
    alert('1');
});
input[type="text"] {
    pointer-events: none;
}
<input type="text" value="It's just a test 1" id="test1" />
<input type="search" value="It's just a test 2" id="test2" />

For better understanding i added two javascript clicks and as you can see, the click doesn't work for the input with "pointer-event:none".

Fantasterei
  • 465
  • 3
  • 11