1

tengo este array de inputs, quiero saber si hay posibilidad de saber el indice dentro del array, para apartir de ahi empezar a pegar contenido de array

<input name="id[]" onchange="app(this)" type="text" class="form-control text-center"> 

Esta es la funcion dentro del onchange:

const app = ( e ) => {
    const value = e.value
    const split = value.split('\t')

    const app = document.querySelectorAll("input[name='id[]']")
    for ( let i = 0; i < app.length; i++ ) {
         app[i].value = split[i]
    }

}

Entonces cuando cuando pego el texto en los inputs, empieza desde el primer indice hasta donde acabe, asi que quisiera saber si cuando pegue los valores empiece desde el input que activo la funcion.

3
  • podrías añadir un id que incluyera un número a cada elemento o un atributo data-* Commented el 26 ene. 2022 a las 8:30
  • Probaste con name="id[0]", name="id[1]", name="id[2]",...? Commented el 26 ene. 2022 a las 15:49
  • Gracias a ambos , lo voy a intentar Commented el 27 ene. 2022 a las 2:39

1 respuesta 1

1

Habiendo obtenido todos los elementos con querySelectorAll() puedes crear un arreglo y obtener el índice fácilmente con findIndex().

Por otra parte, no es recomendable incluir eventos dentro de la misma etiqueta, porque puede complicar la lógica y el mantenimiento de tus scripts; es mejor obtener los elementos y asignar evento desde Javascript, separando vista y lógica, siempre sabrás donde buscar para modificar.

Con addEventListener, por defecto, el parámetro enviado es el evento y puedes obtener el elemento que lo disparó con variableEvento.target.

// Obtener todos los inputs una sola vez
const inputs = document.querySelectorAll("input[name='id[]']");
// La variable e recibe evento y no elemento
const app = (e) => {
    const value = e.target.value;
    const split = value.split('\t')

    // Crear arreglo de inputs para encontrar índice del elemento que disparó el evento
    let index = Array.from(inputs).findIndex(item => item == e.target);
    // Ya puedes usar index para lo que necesites
    console.log(index);
    // Aunque puedes acceder al elemento directamente con e.target
    console.log(e.target.value);
    
    /*
    * No entiendo lo que quieres hacer aquí, por eso lo dejo comentado
    for ( let i = 0; i < inputs.length; i++ ) {
         inputs[i].value = split[i]
    }
    */
}
// Asignar evento a inputs
inputs.forEach(input => input.addEventListener('change', app));
<input name="id[]" type="text" class="form-control text-center"><br>
<input name="id[]" type="text" class="form-control text-center"><br>
<input name="id[]" type="text" class="form-control text-center"><br>
<input name="id[]" type="text" class="form-control text-center">

En resumen, creo que no necesitas el índice, a menos que haya algo más en tu proyecto que no nos hayas contado, pero casi siempre hay alternativas.

1
  • Hola, gracias por tu comentario, lo que pasa es que en ese array de inputs, cuando pegue informacion tabulada la divida entre los inputs, simulando que sea tipo excel cuando pegas una columna con varias filas, entonces ya hacia todo pero cuando pegaba la info en el segundo input dividia la cadena de texto y pega la informacion desde el primer input, entonces nada mas me faltaba que desde el input que pego info desde ahi empiece a dividir el string. Commented el 27 ene. 2022 a las 2:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.