0

Estoy intentando implementar un sistema que cuando el usuario introduzca datos numericos en un textarea, estos se irán separando cada dos valores por una coma. A modo de ejemplo, otra parte del programa consiste que al pulsar un boton se generen numero aleatorios entre -10 y 99 y esto numero los muestre en un textArea. Esto lo consigo bien con este codido:

function tipoRadio()
{
var medidas = elementoID("medidas");//capturo elemento

if (this.id === "medidas_manual")//si el elemento tiene este id 
{
    medidas.value = "";//le vacio
    medidas.disabled = "";//le habilito para poder escribir en el

}

if (this.id === "medidas_aleatorio")//si tenemos este id
{
    var aleatorios = generarValoresAleatorios();//obtengo array aleatorios
    var ale = "";
    for (var i = 0; i < aleatorios.length; i++) {
        ale += aleatorios[i] + ", ";//Los voy añadiendo a una variable con 
                                      comas en medio
    }
    medidas.value = ale;//muestro la variable
    medidas.disabled = "false";     
  }
 }

function generarValoresAleatorios()//Funciona que me genera el array 
                                    aleatorios
{
var arrayAleatorios = new Array();
for (var i = 0; i < 30; i++) {
    arrayAleatorios.push(aleatoriosEntreMinimoMaximo(-10, 99));
}
return arrayAleatorios;

}

resultado obtenido

Este resultado le quiero conseguir pero el usuario introducirá los datos de forma manual. Solo numero en formato dos digitos 01, 44, 08 o también es válido -9 , -6 para números negativos. El maximo numero de digitos es dos. El usuario no esta obligado a escribir las comas.... Resumimiendo, el usuario introduce:

  • 00 ------------ bien
  • 80 ------------ bien
  • -5 ------------ bien
  • 06 ------------ bien
  • 6 ------------ mal faltaría otro dígito
  • 7- ------------ mal el menos no puede ir detrás solo delante (numero negativo)

No se si me explico. Voy editando la pregunta según voy puliendo el problema gracias a los comentarios. Un saludo

12
  • 3
    Hola! Por favor podrías mostrarnos lo que llevas hecho respecto a la separación de comas, para poder guiarte? :)
    – quinqui
    el 19 mar. 2018 a las 12:04
  • 1
    Hola Carlos, sería interesante saber que has hecho hasta ahora y un ejemplo de los parámetros de entrada y los parámetros de salida que esperarías, un saludo.
    – rencinas
    el 19 mar. 2018 a las 12:10
  • Cada dos valores, palabras? letras? frases? parrafos?
    – GDP
    el 19 mar. 2018 a las 12:25
  • 1
    Pulsa sobre editar y añade el código que tienes, será más fácil para todos el 19 mar. 2018 a las 12:27
  • 1
    ¿Y cómo sabes que es 1, 20, 25, 8 y no 12, 02, 58?
    – user7176
    el 19 mar. 2018 a las 13:51

3 respuestas 3

4

He creado una función que mas o menos resuelve tu problemas , se podría separar en 3 partes , la principal recoge los datos del evento de presionar tecla y si tiene "," pues lo separa en un array por estas ","

La segunda parte seria un for para recorrer la cadena y cada 2 valores poner una "," en medio

La tercera parte ya seria la reorganización de valores y insertarlos en el campo

$("#target").keypress(function (e) {
//1
        var value = $("#target").val() + String.fromCharCode(e.which);
        var splits = value.split(",");

        if (splits.length > 1) {
            value = splits[splits.length-1];
        }

//2
        var finalValue = "";

        for (var i = 0; i < value.length; i++) {
            if (i % 2 == 0 && i != 0) {
                finalValue = finalValue + ',';
            }
            finalValue = finalValue + value.charAt(i);
        }
    //3
        if (splits.length > 1) {
            splits.splice(splits.length-1);
            var concat = splits.concat(finalValue);
            finalValue = concat.join()
        }
        $("#target").val(finalValue.substring(0, finalValue.length - 1));
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="target" rows="4" cols="50"></textarea>

0
2

ya todos han aportado su granito de arena al problema, veamos si mi ayuda sirve de algo.

Primero, defino una función format que básicamente analiza el contenido del textarea, lo convierte en un array de valores numéricos y luego llena el textarea con esos valores separados por coma+espacio.

var element=document.querySelector('#numeros'),
    contenido=element.value;
    contenido_arr=contenido.replace(/,/g,' ').trim().split(/\s+/);
    element.value=contenido_arr.join(', ');

Segundo, tengo otra función que se ejecuta cada vez que se ingresa un caracter al textarea. Si no es numérico, ni coma ni espacio, no inserta el caracter.

Si es un espacio, verifica si hay un espacio acumulado, de manera que escribir número + espacio + número + espacio el primer espacio marque un flag: "hay un espacio esperando formateo" y el segundo espacio diga: "el flag está marcado, apliquemos formateo". La idea de esto es que puedas escribir número + espacio + número sin que ese espacio gatille el formateo impidiéndote escribir el segundo número. Esto tiene otro caso de borde. Si quieres insertar un número en medio de los que ya tienes, la función necesita tolerar que insertes un espacio antes de gatillar el formateo.

Tercero, si el textarea pierde el foco (evento onblur) se gatilla el formateo.

La solución no es perfecta, pero cumple aproximadamente tu intención:

var spacepending=false;
var format = function() {
  var element=document.querySelector('#numeros'),
      contenido=element.value;
      contenido_arr=contenido.replace(/,/g,' ').trim().split(/\s+/);
      element.value=contenido_arr.join(', ');
};
var checkKey = function(event) {
  
  var keyName = event.key;
  if(keyName===',') {
    //no hago naga
  } else if (keyName === ' ') {
    if(spacepending) { // si ya se insertó un espacio, ejecuto el formateo
      format()
      spacepending=false;
    } else { // si no, almaceno que hay un espacio pendiente
      spacepending=true;
    }
  } else if(isNaN(keyName)) {
    event.preventDefault();
    return false;
  }
  
  
};
#numeros {
width: 100%;
height: 100px;
background:#f7f7f7;
}
<textarea id="numeros" onkeypress="checkKey(event, this)" onblur="format()" ></textarea>

2
  • Faltarían los negativos.
    – user13558
    el 19 mar. 2018 a las 17:11
  • 1
    cierto. Pero ahí la implementación es más compleja y más difícil de entender para el usuario, por ejemplo sólo se acepta el - si el caracter precedente no es un número. Por eso no incluí negativos ni decimales.
    – ffflabs
    el 20 mar. 2018 a las 10:19
2

Usando la estrategia divide y vencerás divide tu problema en dos partes:

  • Imagina que tienes una única entrada (un valor de dos dígitos) y quieres comprobar si es válida. Puedes crear una función que tome esa entrada y la valide, por ejemplo esValorValido(valor);
  • Usando esta función de manera iterativa, puedes validar todas las entradas, así que lo que te queda es dividir el texto del textarea en las entradas:

let valorDelTextArea='55, 06,77,-1,';

let valores=obtenerValores(valorDelTextArea);

function obtenerValores(texto) {
  if (!texto) return []; // ningún valor en una cadena vacía
  
  let valores=texto.split(',');
  
  return valores.map(v=> v? v.trim() : undefined );
  
}


console.log(valores);

Y ahora puedes crear un bucle que te diga si cada uno de esos valores es correcto o no.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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