HTML form input required and readonly - for mobile too

Question

I have a calendar datepicker in CodeIgniter. This field is required to successfull process the script, and I want to block keyboard input on this input - by security reason and hide keyboard on data-entry on smartphones.

Now I'm using required field and I added class readonly to it:

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>

It works on PC, but not in mobile - like android.

Check this http://stackoverflow.com/questions/7812063/jquery-datepicker-readonly or http://stackoverflow.com/questions/4164542/how-to-disable-manual-input-for-jquery-ui-datepicker-field — drosam, Feb 04 '16 at 16:48

score 1 · Answer 1 · answered Feb 04 '16 at 16:49

1

Using CSS, you can prevent selection:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

You could also try to prevent default on click:

$(".readonly").on("click", function(e) {
    e.preventDefault();
}

answered Feb 04 '16 at 16:49

developthewebz

1,827
3
17
43

With CSS I can't input anything and field is required in client side (browser HTML5) on PC and mobile, but in mobile keyboard are still shows. – Saibamen Feb 04 '16 at 17:09
And script code doesn't work - I can type any value to input form – Saibamen Feb 04 '16 at 17:20

score 1 · Accepted Answer · answered Feb 04 '16 at 17:27

1

Ok I got it. I use:

onfocus="blur();"

and required.

It works on both PC and Mobile.

answered Feb 04 '16 at 17:27

Saibamen

610
3
17
43

HTML form input required and readonly - for mobile too

2 Answers2