-3

me gustaria saber como mostrar el valor del input en un alert, inmediatamente en el momento que acabe de escribir dentro el input que me lo muestre. En JQuery

function mostrar(num) {
 var x = $("#num").val();
 alert(x);
}
    <input type="text" name="num" step="1" Onchange = "mostrar('num')" value=""  size="20"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • parece como si buscaras databinding como el que hay en angular o react jejeje Jquery no está pensado para esto Commented el 29 oct. 2017 a las 14:18

4 respuestas 4

1

Bueno creo que hay conceptos mezclados y algunos errores en el ejemplo tanto de marcado html como de jquery, así que lo he editado. Aún así siguiendo literalmente tus instrucciones.

function mostrar() {
 var x = $("#numero").val();
 alert(x);
}
<input type="number" step="1" onkeyup="mostrar()" id="numero" size="20"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Llega a resultar molesto no ? podrías indicar si hace falta algún timeout o esperar a que se produzca algún evento en concreto como onBlur, onChange ...

** Actualizacion **

siendo tu ejemplo el siguiente:

function mostrar(num) {
 var x = $("#num").val();
 alert(x);
}
    <input type="text" name="num" step="1" Onchange = "mostrar('num')" value=""  size="20"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

siguen habiendo errores en tu código, aun asi:

function mostrar(input) {
 //solo queremos mostrar la alerta
 // si tengo un formato en concreto
 // por ejemplo dos numeros separados por un espacio
 if(/[0-9]+ [0-9]+/.test(input.value)){
   var numeros = input.value.split(' ');
   alert(numeros[0]+','+numeros[1]);
 }
 //o con jquery usando this
 if(/[0-9]+ [0-9]+/.test($(input).val())){
   var numeros = $(input).val().split(' ');
   alert(numeros[0]+','+numeros[1]);
 }
}
<p>
onchange se ejecuta al perder el focus o al cambiar de valor solo en campos select, radio y checkbox <br>
<input type="text"  onchange="mostrar(this)"/>
</p>

<p>
onkeyup se ejecuta justo despues de cada introduccion o eliminacion de caracteres <br>
<input type="text"  onkeyup="mostrar(this)"/>
</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

5
  • Bueno lo que quiero hacer es que con el valor que le pongo por input, me indique que si es mayor o igual a otro numero. Por lo tanto el evento onkeyup no me sirve. Porque si tengo que escribir dos numeros en el mismo input me entrara dos veces a la funcion.
    – Oriol
    Commented el 29 oct. 2017 a las 14:52
  • Vamos por partes jejej, si lo que deseas es validar dos datos introducidos en el mismo input deberias actualizar correctamente el titulo y contenido de la pregunta, asi podemos ayudarte mejor ;). Por otro lado describe el proceso que se debe tomar desde el punto de vista de un usuario y que has intentado hasta ahora para conseguirlo. Si te cuesta descrbirlo usa algun codigo o imagen como ayuda. Ya que sigo sin entender eso del mismo input para dos numeros. Commented el 29 oct. 2017 a las 15:00
  • Oriol me pongo a ello pero actualiza esta informacion en la propia pregunta usando el editor de codigo por favor. Commented el 29 oct. 2017 a las 15:02
  • Ya esta editado Angel!
    – Oriol
    Commented el 29 oct. 2017 a las 15:07
  • @Oriol , te he respondido pero no has descrito correctamente tu caso. Poca gente le hará caso a tus preguntas si no están correctamente descritas. Me comentabas lo de los números y no lo has descrito todavia Commented el 29 oct. 2017 a las 16:18
1

Yo lo haría de la siguiente forma, aprovechando la librería jQuery.

$('#num').focusout(function() {
 var x = $(this).val();
 alert(x);

 // Recomiendo usar la consola en lugar de alerts
 console.log(x);
});
    <input type="text" name="num" step="1" id="num" value=""  size="20"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1

Basándome en el código subido lo único que te faltaría es ponerle un id al input ya que estas referenciando un id que no existe por eso muestra undefined.

function mostrar(num) {
         var x = $("#num").val();
         alert(x);
        }
<input type="text" id="num" step="1" Onchange = "mostrar('num')" value=""  size="20"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

Lo puedes lograr únicamente con javascript teniendo en cuenta:

  • onkeyup HTML event: evento que se dispara cuando se "suelta" una tecla, momento donde te interesa obtener el valor del input.
  • DOM addEventListener: posibilidad de bindear eventos a elementos del DOM

let num = document.getElementById('num'); 
num.addEventListener("keyup", function(){
  alert(this.value);
});
<input type="text" id="num" name="num" step="1"  value=""  size="20"/>

Con jQuery:

$('#num').on("keyup", function(){
	alert(this.value);
});
<input type="text" id="num" name="num" step="1"  value=""  size="20"/>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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.