Knockout Has-focus with multiple inputs

I am using knockoutjs and in my Template i have a foreach loop that will display the data it grabs from the JSON data i want to set the focus to the first input on the screen it works perfectly when there is just on input on the screen but when it gets to the second screen there are two in puts it only sets focus to the last input on the screen

here is my HTML:

<div id="section">
<span data-bind="template: { name: 'screenTemplate', foreach: screens, as: 'screen'}"></span>
<script type="text/html" id="screenTemplate">
    <!-- ko if: showFlds -->
    <!-- ko if: showNote -->
    <span data-bind="template: { name: 'fldTemplate', foreach: flds}"></span>
    <!--/ko-->
    <!--/ko-->
</script>

<script type="text/html" id="fldTemplate">
    <form>
    <span class="text" data-bind="text: fieldName"></span>
    <br/>
    <input type="text" class="inputVal" data-bind="valueUpdate: 'afterkeydown', value: inputValue, disable: (inputValue() == expectedValue()), visible:(inBool() != false)" />
    <br/>
  </form>
</script>

<div data-bind="visible:screens()[cScreen()].rdtNote() === true">
    <h2 style="color: red"><span data-bind="text: rdtNotification()[0].description()"></span></h2>
    <button data-bind="click: makeHidden">Acknowledged</button>
</div>

As shown the hasFocus is on the input in the field Template

I want to know if there is a way I can make it set focus on the first input and then move to the next input once that input is correct

If any more information is needed please ask I will do my best to provide

P.s

  • Any answer to this must also work in IE6 as it will eventually be running on a IE6 scanning gun

Current Progress: I have used jQuery

$(document).ready(function(){
  $('form').find('input[type=text],textarea,select').filter(':input:enabled:visible:first').focus();
})

But when using this it does not automatically select the next input when the screen changes is there a way to get that to work ?

Answers


SOLVED MY PROBLEM :

$(document).ready(function() {
 $('form').find('input[type=text],textarea,select').filter(':input:enabled:visible:first').focus();
});

$(document).keyup(function(e){
 $('form').find('input[type=text],textarea,select').filter(':input:enabled:visible:first').focus();
});

var e = $.Event("keyup", { keyCode: 13}); //"keydown" if that's what you're doing
$("body").trigger(e);

Using this I am able to set the focus to the first visible enabled input and then using jQuery to trigger the Enter Key key up I was able to make sure that the next input was always focused

Thanks @neps for the push in the right direction

Working Plunker


Need Your Help

Getting Exception when trying to retrieve data from "OpenWeatherMap.org"

c# visual-studio xaml nullreferenceexception openweathermap

I am currently working on Weather API in which I am trying to take values from OpenWeatherMap.org. But When I click the button to retrieve the information from the website. It gives me the following

runit calls script instead of service command

bash sh runit

Is is possible that runit calls script instead of calling directly the service. For example, I have an init script to launch uwsgi. Could i just call this script inside runit init script? Thank you...