Focus Next Input Once Reaching Maxlength Value

$(document).ready(function(){    $('input').keyup(function(){        if($(this).val().length==$(this).attr("maxlength")){            var i = $('input').index(this);            $('input').eq(i+1).focus();        }    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="date" class="container_date">    <div class="date_day" id="input_day">        <input type="text" maxlength="2" name="input_day" id="1" value="">    </div>    <div class="date_month" id="input_month">        <input type="text" maxlength="2" name="input_month" id="2" value="">    </div>    <div class="date_year" id="input_year">        <input type="text" maxlength="4" name="input_year" id="3" value="">    </div></div><div id="time" class="container_time">    <div class="time_hour" id="input_hour">        <input type="text" maxlength="2" name="input_hour" id="1" value="">    </div>    <div class="time_minute" id="input_minute">        <input type="text" maxlength="2" name="input_minute" id="2" value="">    </div></div>

Focus next input once reaching maxlength value in react without jQuery and accept only numeric values

Use the onChange event handler for this. When the user typed MAX_LENGTH (4 characters), the focus is set to the next element. React.findDOMNode gets the next DOM node corresponding to a React component. The focus method on the DOM node sets the focus.

handleTextChange(e) {
  if (e.target.value.length <= MAX_LENGTH) {
    this.setState({ value: e.target.value });
  }
  if (e.target.value.length === MAX_LENGTH) {
    React.findDOMNode(this.nextComponent).focus();
  }
}

The component JSX is:

<input value={this.state.value} onChange={this.handleTextChange} />
<input ref={c => this.nextComponent=c} />

The nextComponent is set in ref. The this.nextComponent is used by React.findDOMNode to get the DOM node corresponding to the next component.

Go to next input field at maxLength?

Pretty sure this is not recommended UX-wise but here is an example on how you can achieve it: https://codesandbox.io/s/move-to-next-input-on-condition-103b5?file=/src/App.vue

The main part of useful code is

focusNextOncePopulated(event, max) {
  if (event.target.value.length === max) {
    const nextElement = this.$refs?.[`input-${Number(event.target.dataset.index) +1}`]
    if (nextElement) nextElement.focus()
  }
},

Explanation: each time you input a char, you check if the length of the field reached the maximum you've set on a particular input. If it is and there is a similar input as a sibling, you focus it.

Adding a debounce of a few milliseconds would be nice too, performance-wise.

EDIT: to prevent any issues of trying to find the correct next input in the DOM, we setup some refs on each of the inputs (recommended way in Vue to select some DOM elements). Then, when we have reached the max, we increment our current's input data-index by one, which enables us to go to the next input.

PS: ?. syntax is optional chaining, it prevents ugly code and allows to avoid an error if there is no next input once max is reached.

PS: Not sure if there is a way to directly get the $refs of an element on it's @input event but if there is, I didn't found out how to do it.

Move input focus to next input when maxLength is reached - Angular 4 / Typescript

Use a different approach. Angular does not select elements and read attributes from the existing DOM, as jQuery does, because Angular generates the DOM from data. So it's difficult, if possible at all, to read the input's maxlength attribute, and anyway it would be clumsy an "non-Angulary".

Instead, use a different approach and pass the maxLength in the keyup function :

<input type="text" (keyup)="keytab($event, 2)" />
<input type="text" (keyup)="keytab($event, 4)" />


keytab(event, maxLength){
   console.log(maxlength); // 2 or 4
   // .......
}

How to focus next input field on keypress

How about:

$('input.mobile-verify.pass').on('keyup', function() {
    if ($(this).val()) {
        $(this).next().focus();
    }
});

So on key up, if there is a value, focus the next. Using keyup allows you to validate the contents rather than skipping right away. They might switch to number mode on iOS for example which would trigger the focus if you simply use keypress.

Codepen: http://codepen.io/anon/pen/qaGKzk

Related Topics