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

I am using jquery mobile for a cordova app to run in android and ios .. I have a requirement where I have a textbox with a default in readonly state. When focusing the textbox, I need to remove the value and readonly attribute and change the type to datetime-local and focus.

All of this has to happen in a one touch event. Now when you focus on readonly, the value and type of the input field changes. But not focusing, so you have to click again to see the datetime picker on both android and ios devices. I cannot find the problem.

My code looks 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.

+3


source to share


1 answer


I cannot say about android. But the following is equivalent for HTML :

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



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

      

0


source







All Articles