CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Cârnăciov
Cârnăciov

Reputation: 1144

Make input readonly on mobile devices only

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

Upvotes: 0

Views: 1469

Answers (1)

Fantasterei
Fantasterei

Reputation: 462

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".

Upvotes: 2

Related Questions