This is a migrated thread and some comments may be shown as answers.

[Solved] Click on Submit-Button resets focus on input-field

1 Answer 92 Views

General Discussion

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Tobias asked on 16 Jun 2015, 09:45 AM

beispiel.jpg

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>

<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 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 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>

<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 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 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>

<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 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 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>

<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 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 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>

<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 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 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>

<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>

1 Answer, 1 is accepted

answered on 18 Jun 2015, 11:25 AM

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.