Remove the readonly atrribute and change the type and focus on the same input field in a single event

Question

I am using jquery mobile for a cordova application to be run in android and ios.. I have a requirement where i have a text field with a default value in readonly state. On focusing the text field, i need to remove the value and readonly attribute and change the type to datetime-local and focus.

All these should happen in a single touch event. Now on focusing the readonly,value and type of the input field changes.but not getting focussed,so have to click again to see the datetime picker both in android and ios devices. I cant find the issue.

My code goes like this.

HTML:

<input type="text" readonly data-clear-btn="false" id="instantTime"  value="Right Now" >

JS:

$('#instantTime').off("focus").on("focus", function(e) {
        e.preventDefault();
        if($(this).prop("type") == "text"){
            $(this).removeAttr('readonly').val('');
            $(this).prop("type", 'datetime-local').select();
        }
    });
$('#instantTime').off("blur").on("blur", function(e) {
    e.preventDefault();
    if($(this).val().trim() == ""){
        $(this).prop("type",'text').val("Right Now").attr('readonly', true).blur();
    }else{
        $(this).prop("type",'datetime-local').blur();
    }
});

Thanks in advance.

Answer 1

I can't say about android. But the following is the equivalent for HTML:

Put the following code in $(document).ready(function(){}):

$("#instantTime").click(function() {
    $(this).prop("readonly",false);
    $(this).prop("type","datetime-local");
    $(this).focus();
});