Why keyboard not work for text field when Visualforce page in Salesforce1 is using JQuery to set cursor in text field?

Question

When I use this VF page.

<apex:page controller="VialEntryController" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false">
<apex:stylesheet value="//cdn.jsdelivr.net/webjars/bootstrap-sf1/0.1.0-beta.6/css/bootstrap-namespaced.css"/>
<apex:includeScript value="{!$Resource.JQuery_1_11_1}" />
<apex:pageMessages ></apex:pageMessages>
<script language="JavaScript">

//----------------------------
// JQuery initialisation
//----------------------------
j$=jQuery.noConflict();
j$(document).ready(function() {
    initialisePage();
});

//-------------------------
function initialisePage() {
//-------------------------
    j$("[id*='vial1']").focus();
}
</script>
<apex:form >
    <div class='bootstrap'>
        <center>
        <h1>
            CDX10 Accessioning
        </h1>
        <p>
            <apex:input id="vial1" value="{!theVials[0].Name}" required="true" html-placeholder="CDX10-XX-XX-#1" styleClass="form-control" type="text"/><br/>
        </p>
        <p>
            <apex:input id="vial2" value="{!theVials[1].Name}" html-placeholder="CDX10-XX-XX-#2" styleClass="form-control" type="text"/><br/>
        </p>
        <p>
            <apex:input id="vial3" value="{!theVials[2].Name}" html-placeholder="CDX10-XX-XX-#3" styleClass="form-control" type="text"/><br/>
        </p>
        <p>
            <apex:input id="vial4" value="{!theVials[3].Name}" html-placeholder="CDX10-XX-XX-#4" styleClass="form-control" type="text"/><br/>
        </p>
        <p>
            <apex:input id="vial5" value="{!theVials[4].Name}" html-placeholder="CDX10-XX-XX-#5" styleClass="form-control" type="text"/><br/>
        </p>
        <p>
            <apex:input id="vial6" value="{!theVials[5].Name}" html-placeholder="CDX10-XX-XX-#6" styleClass="form-control" type="text"/><br/>
        </p>
        <apex:commandButton value="Submit" action="{!submitTheVials}"/>
    </center>
    </div>
</apex:form>

The VF page inside the Salesforce1 app loads properly with the cursor in the first field, but then I can't type. As you can see in this screenshot, I have typed the letter "u" but nothing shows in the field.

Thank you in advance for your assistance!

Answer 1

After reviewing the documentation further and reviewing some online discussions, the use of the <apex:form> tag is causing the issue. The javascript and the the tag don't play well together, so I need to re-write the VF page and Controller using JavaScript Remoting.

Answer 2

mattyd2, I think the 'type="text"' attribute on the apex:input is causing this problem and not the apex:form. If your fields are basic text field, the apex:input automatically renders them as 'type="text"' inputs..