Click on Submit-Button resets focus on input-field

2 posts, 0 answers
  1. Tobias
    Tobias avatar
    11 posts
    Member since:
    Nov 2013

    Posted 16 Jun 2015 Link to this post

    Hey there,

     I have a big problem with a form in my App. I have a lot of input fields there, which the user has to fill out. 

    If the user hits the SUBMIT button, the keyboard dissapears, the form moves down again and on the same position, where the submit button was before an input field is focused again. So the keyboard is coming up again.

    Why does it refocus? Has anybody a solution for that?

     This is the HTML of the form:

    <form id="formNewEngineReadout">
        <div class="ym-grid">
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">FLIGHT LEVEL</label>
                    <input type="tel" id="fl" class="fit" data-label="FL " data-max-length="3" data-check="numInteger" />
                </div>                   
            </div>                   
        </div>
        <br>
        <div class="ym-grid">
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">IAS</label>
                    <input type="tel" id="ias" class="fit" data-label="KT " data-max-length="3" data-check="numInteger" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">MACH (.M)</label>
                    <input type="tel" id="mach" class="fit" data-label="M." data-max-length="3" data-check="numInteger" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gr">
                <div class="ym-gbox">
                    <label for="test1">TAS</label>
                    <input type="tel" id="tas" class="fit" data-label="KT " data-max-length="3" data-check="numInteger" />
                </div>                   
            </div>
        </div>
        <br>
        <div class="ym-grid">
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">RAT</label>
                    <input type="tel" id="rat" class="fit" data-label="°C " data-max-length="3" data-check="numIntegerPN" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">ISA</label>
                    <input type="tel" id="isa" class="fit" data-label="°C " data-max-length="3" data-check="numIntegerPN" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gr">
                <div class="ym-gbox">
                    <label for="test1">WEIGHT</label>
                    <input type="tel" id="weight" class="fit" data-label="lbs " data-max-length="5" data-check="numInteger" />
                </div>                   
            </div>
        </div>
        <br>
        <div class="ym-grid">
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">N1 (L/R)</label>
                    <input type="tel" id="n1L" class="fit" data-label="% " data-max-length="5" data-check="numFloat" />
                    <input type="tel" id="n1R" class="fit" data-label="% " data-max-length="5" data-check="numFloat" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">ITT (L/R)</label>
                    <input type="tel" id="ittL" class="fit" data-label="°C " data-max-length="3" data-check="numInteger" />
                    <input type="tel" id="ittR" class="fit" data-label="°C " data-max-length="3" data-check="numInteger" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gr">
                <div class="ym-gbox">
                    <label for="test1">N2 (L/R)</label>
                    <input type="tel" id="n2L" class="fit" data-label="% " data-max-length="5" data-check="numFloat" />
                    <input type="tel" id="n2R" class="fit" data-label="% " data-max-length="5" data-check="numFloat" />
                </div>                   
            </div>
        </div>
        <br>
        <div class="ym-grid">
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">OIL PRESS (L/R)</label>
                    <input type="tel" id="opL" class="fit" data-max-length="2" data-check="numInteger" />
                    <input type="tel" id="opR" class="fit" data-max-length="2" data-check="numInteger" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">OIL TEMP (L/R)</label>
                    <input type="tel" id="otL" class="fit" data-label="°C " data-max-length="2" data-check="numInteger" />
                    <input type="tel" id="otR" class="fit" data-label="°C " data-max-length="2" data-check="numInteger" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gr">
                <div class="ym-gbox">
                    <label for="test1">FUEL FLOW (L/R)</label>
                    <input type="tel" id="ffL" class="fit" data-max-length="3" data-check="numInteger" />
                    <input type="tel" id="ffR" class="fit" data-max-length="3" data-check="numInteger" />
                </div>                   
            </div>
        </div>
        <br>
        <div class="ym-grid">
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">DC BATTERY VOLT</label>
                    <input type="tel" id="volt1" class="fit" data-max-length="2" data-check="numInteger" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gl">
                <div class="ym-gbox">
                    <label for="test1">AMPS (L/R)</label>
                    <input type="tel" id="ampsL" class="fit" data-max-length="3" data-check="numInteger" />
                    <input type="tel" id="ampsR" class="fit" data-max-length="3" data-check="numInteger" />
                </div>                   
            </div>
            <div class="ym-g5 ym-gl">
                  
            </div>
            <div class="ym-g30 ym-gr">
                <div class="ym-gbox">
                    <label for="test1">User</label>
                    <input type="text" id="userEngread" class="fit" data-max-length="3" style="text-transform:uppercase;" />
                </div>                   
            </div>
        </div>
     
        <br>
        <div class="buttonArea">
            <input type="submit" style="display:none" />
            <button data-role="button" data-click="sendEngreadoutForm" id="btnSendEngReadout">Save Engine-Readout</button>
        </div>
         
    </form>

  2. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 18 Jun 2015 Link to this post

    Hi Tobias,

    I see that you have submitted a support ticket identical to this forum post, so I will repeat my answer from there:

    Is there a special reason why you are using a form? Forms are a bit of a thing of the past and were used in older web technologies to fire a POST server side controller for example. If you are building a hybrid mobile app, then you are building a SPA (Single Page Application). If you are not using the <form> element for a specific reason, I suggest removing it and using a simple button bound to a function in your view model.

    Another thing that you can try is to set the native-scrolling feature for the view with the form element. This will force the web view to use its own scrolling behavior instead of the Kendo UI JavaScript scrolling. The experience should be much better. You can see how to set the feature here.

    I suggest we continue our communication in the support thread since it will guarantee you a quicker response.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top