如何在输入类型时间内设置自动对焦

Question

I have a simple input with type of time and I try to set auto focus next input in the DOM tree

<input type="time" name="startTime" (keyup)="setFocus($event)"/>

setFocus(element) {
    if (element.target.value.length == 5) {

        let coll = document.getElementsByTagName('input');
        let array = Array.from(coll)
        let thisOne = array.forEach((el) => {
            if (el == element.target) {
                let index = array.indexOf(el)

                let next = array[index + 1]

                next.focus();
                next.select();
            }
        });


    }
}

The problem is when the time had default value the value length is always 5 (on keyup) like 05:45 or 18:22 , so how could I set next auto focus? Is there any way to find out the cursor is in the 5th position? any idea?

Answer 1

Knowing that you have id for the input element, then you can set focus with JavaScript focus method like this

document.getElementById(next.id).focus();

Edit: I found that focus doesn't work if element don't have id, if you set your element id, then your code will perfectly work.