He desarrollado una navegación con teclas de flecha dentro de una tabla. La navegación es posible con las teclas de flecha arriba, abajo, izquierda y derecha. ¿Cómo se puede colocar el cursor siempre a la derecha en la entrada durante la navegación?
Mi Stackblitz: https://stackblitz.com/edit/stackoverflow-72056135-ube6hj?file=app%2Ftable-basic-example.ts
Mi código:
//HTML
<input class="edit-input || focus-cell" type="text"[formControl]="rowControl.get(column.attribute)" appArrowKeyNav>// TS
/** * Use arrowKeys * @param object any */ move(object) { const inputToArray = this.inputs.toArray(); let index = inputToArray.findIndex((x) => x.element === object.element); switch (object.action) { case 'UP': index -= this.columns.length; break; case 'DOWN': index += this.columns.length; break; case 'LEFT': index--; break; case 'RIGTH': index++; break; } if (index >= 0 && index < this.inputs.length) { inputToArray[index].element.nativeElement.focus(); } }Ahora he resuelto el problema considerando setSelectionRange() . He optimizado mi código de la siguiente manera:
/** * Use arrowKeys * @param object any */ move(object) { const inputToArray = this.inputs.toArray(); let index = inputToArray.findIndex((x) => x.element === object.element); switch (object.action) { case 'UP': index -= this.columns.length; break; case 'DOWN': index += this.columns.length; break; case 'LEFT': index--; break; case 'RIGTH': index++; break; } if (index >= 0 && index < this.inputs.length) { // Set focus inputToArray[index].element.nativeElement.focus(); // Set cursor at the end of the text in the input setTimeout(() => { if (inputToArray[index].element.nativeElement.value?.length > 0) { const pos = inputToArray[index].element.nativeElement.value.length; inputToArray[index].element.nativeElement.setSelectionRange(pos, pos); } }, 1); } }