how to hide the keyboard of the device when user click on Input text in phonegap android

Question

I am creating an input text in which when user click to enter something in it a popup window will open which will have some text fields to be entered. Know the issue is when user click on the input text field Keyboard get visible and then popup window open what i want is when ever a user click on the text filed a popup window should open not the device keyboard and it should not show any cursor in the text filed to. I am creating and popup and the input text dynamically inside collapse where the data for creating the fields come from the table are stored in the elementArray. here is the code for creating an popup and the input text field:

var dynamic_a=$(document.createElement('a')).attr('href',"#popupPhone"+i);
        dynamic_a.attr('data-rel','popup');
        dynamic_a.attr('data-position-to','window');
        dynamic_a.attr('data-inline',true);
        dynamic_a.attr('data-transition','pop');
        dynamic_a.appendTo('#collapse'+elementArray[i].Tab_id);

        var dynamicinput=$(document.createElement('input')).attr('type','text');
            dynamicinput.attr('id',elementArray[i].Field_name);
            dynamivinput.blur();
            dynamicinput.appendTo(dynamic_a);

            console.log("VAlue of i: "+i);
            popupwindow=$(document.createElement('div')).attr('data-role','popup');
            popupwindow.attr('id',"popupPhone"+i);
            popupwindow.attr('data-theme','d');
            popupwindow.appendTo('#contentblock');

        var dynamic_form=$(document.createElement('form'));
            dynamic_form.append("<div data-role='header' data-theme='b' id='headerpopup'><h3 id='header"+i+"'align='center'>"+elementArray[i].Display_name+" Details</h3></div>");
            dynamic_form.append("<div id='popup"+elementArray[i].Field_name+"' style='padding:10px 20px'></div>");
            dynamic_form.appendTo(popupwindow);

             var formtable=$(document.createElement('table')).attr('id',"table"+i);
                formtable.append('<tr><td id="colmn1'+i+'"></td><td id="colmn2'+i+'"></td></tr>');
                formtable.appendTo("#popup"+elementArray[i].Field_name);

            var country_label=$(document.createElement('label')).attr('for','country_Code'+i);
                country_label.text('Country Code');
                country_label.appendTo('#colmn1'+i);

            var input_label=$(document.createElement('input')).attr('id','country_Code'+i);
                input_label.attr('data-theme','d');
                input_label.attr('type','number');
                input_label.appendTo('#colmn2'+i);
                 $("#colmn2"+i).append("<label id='errorcountry_code'style='color:red' align='center'></label>");

            var table_row2=$(document.createElement('tr'));
                table_row2.append("<td id='colmn3"+i+"'></td><td id='colmn4"+i+"'></td>");
                table_row2.appendTo(formtable);

            var area_label=$(document.createElement('label')).attr('for','area_Code'+i);
                area_label.text("Area Code");
                area_label.appendTo('#colmn3'+i);

            var area_input=$(document.createElement('input')).attr('id','area_Code'+i);
                area_input.attr('data-theme','d');
                area_input.attr('type','number');
                area_input.appendTo('#colmn4'+i);
                $("#colmn4"+i).append("<label id='errorarea_code'style='color:red' align='center'></label>");

            var table_row3=$(document.createElement('tr'));
                table_row3.append("<td id='colmn5"+i+"'></td><td id='colmn6"+i+"'></td>");
                table_row3.appendTo(formtable);

            var local_label=$(document.createElement('label')).attr('for','local'+i);
                local_label.text('Local');
                local_label.appendTo('#colmn5'+i);

            var local_input=$(document.createElement('input')).attr('id','local'+i);
                local_input.attr('data-theme','d');
                local_input.attr('type','number');
                local_input.appendTo('#colmn6'+i);
                $("#colmn6"+i).append("<label id='errorlocal'style='color:red' align='center'></label>");

            var table_row4=$(document.createElement('tr'));
                table_row4.append("<td id='colmn7"+i+"'></td><td id='colmn8"+i+"'></td>");
                table_row4.appendTo(formtable);

            var extenson_label=$(document.createElement('label')).attr('for','extension'+i);
                extenson_label.text('Extension');
                extenson_label.appendTo('#colmn7'+i);

            var extenson_input=$(document.createElement('input')).attr('id','extension'+i);
                extenson_input.attr('data-theme','d');
                extenson_input.attr('type','number');
                extenson_input.appendTo('#colmn8'+i);

            var button_Ok=$(document.createElement('a')).attr('id','Okbutton');
                button_Ok.attr('data-role','button');
                button_Ok.attr('data-inline',"true");

                button_Ok.attr('onClick','setPhonevalue('+i+',elementArray)');
                button_Ok.text('Ok');
                button_Ok.appendTo("#popup"+elementArray[i].Field_name);

            var button_Cancel=$(document.createElement('a')).attr('id','Cancelbutton');
                button_Cancel.attr('data-role','button');
                button_Cancel.attr('data-inline',"true");
                button_Cancel.attr('data-rel',"back");
                button_Cancel.text('Cancel');
                button_Cancel.appendTo("#popup"+elementArray[i].Field_name);

Thanks in advance.

Answer 1

Use label rather then inputbox and make look and fill like inputbox and set onclick() method for "label"