Si queremos centrarnos en el campo de entrada de texto cuando el campo de entrada actual alcance su capacidad máxima de caracteres, tenemos que encontrar el siguiente elemento HTML de entrada y hacer que se centre. Cada vez que el usuario escribe en el campo de texto actual, debemos verificar si el campo tiene un carácter máximo especificado. En caso afirmativo, entonces tenemos que centrarnos en el campo de entrada de texto. Podemos usar la función focus() para enfocar el campo de entrada en particular.
Creando la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:
cd foldername
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: podemos ver en el código, cada vez que escribimos en el campo de entrada, se llamará a la función handleChange y decidirá si el siguiente campo debe ser el foco o no en función de la cantidad de caracteres escritos en el campo de entrada actual . Si alcanza el carácter máximo, encontrará el siguiente campo y lo enfocará. Así es como se enfoca el siguiente campo de entrada cuando el campo de entrada actual alcanza el límite máximo de caracteres.
App.js
import React from "react";
class App extends React.Component {
render() {
return (
<div>
<InputFields></InputFields>
</div>
);
}
}
class InputFields extends React.Component {
handleChange = (e) => {
const { maxLength, value, name } = e.target;
const [fieldName, fieldIndex] = name.split("-");
let fieldIntIndex = parseInt(fieldIndex, 10);
// Check if no of char in field == maxlength
if (value.length >= maxLength) {
// It should not be last input field
if (fieldIntIndex < 3) {
// Get the next input field using it's name
const nextfield = document.querySelector(
`input[name=field-${fieldIntIndex + 1}]`
);
// If found, focus the next field
if (nextfield !== null) {
nextfield.focus();
}
}
}
};
render() {
return (
<div style={{ padding: 30 }}>
<InputFild name="field-1" length="3"
handleChange={this.handleChange} />
<InputFild name="field-2" length="4"
handleChange={this.handleChange} />
<InputFild name="field-3" length="3"
handleChange={this.handleChange} />
</div>
);
}
}
class InputFild extends React.Component {
render() {
return (
<input
style={{ margin: 10 }}
type="text"
name={this.props.name}
maxLength={this.props.length}
onChange={this.props.handleChange}
></input>
);
}
}
export default App;
Producción:
Publicación traducida automáticamente
Artículo escrito por KapilChhipa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA