3

Cómo puedo agregar un onkeypress a un input desde javaScript?.

Mi código es el siguiente, la función soloNumero funciona, ya la probé.

<form action="" id="form">
    <input type="text" placeholder="Solo números" id="btn">

</form>

$("#btn").addEventListener("click", function(){

        var input = document.getElementById("btn")

        input.setAttribute("onkeypress", "return soloNumero(event)");
        input.setAttribute("onpaste", "return false");

        $("#form").appendChild(input)           
    })
    function $(selector){
        return document.querySelector(selector)
    }
1
  • Explicame un poco mejor, probe tu codigo y si agrega onkeypress y onpaste al input, cual es el problema que tienes Commented el 10 ene. 2020 a las 20:20

2 respuestas 2

1

Adjuntar Eventos Dinámicos

Para adjuntar un evento a un elemento html de manera dinámica (a una pagina en ejecución) podemos hacerlo con jQuery usando el comando .on(), también se puede hacer con javaScript usando el comando element.addEventListener

Partiendo de tu código, te dejo un ejemplo funcional de como hacerlo con jQuery:

$("document").ready(function() {
 $("#btn").on({
  keypress: soloNumeros,
  paste: function(e) { return console.info("onPaste in: "+e.target.id); }
 });
})
function soloNumeros(e) {
 console.info("onKeypress in: "+e.target.id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
 <input type="text" placeholder="Solo números" id="btn">
</form>

Aquí te dejo otro ejemplo donde solo permite ingresar números, ademas incluye un input donde te muestro como usar expresiones regulares con html5

$("document").ready(function() {
 $("#btn").on({
  keydown: soloNumeros,
  paste: function(e) { return false; }
 });
})
function soloNumeros(e) {
 return (e.key.length != 1 || 1+e.key.search(/^[0-9]/)) ? true : false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
 <input type="text" placeholder="Solo números" id="btn">

 <!-- ingresar solo números usando expresiones regulares en html5 
      la validacion se ejecuta cuando pulsas el boton "submit"-->
 <input type="text" placeholder="Solo números" pattern="^[0-9]*" title="debe ingresar solo numeros">
 <input type="submit" value="submit">
</form>

Espero te ayude el ejemplo ;))...

0

Probé tu código y si agrega onkeypress y onpaste al input

Prueba borrar la linea:

$("#form").appendChild(input) 

Para que te permita escribir en el input luego de haber agregado los atributos.

Te quedaría algo así:

$("#btn").addEventListener("click", function(){

        var input = document.getElementById("btn")

        input.setAttribute("onkeypress", "soloNumero(event)");
        input.setAttribute("onpaste", "return false");

    })
    function $(selector){
        return document.querySelector(selector)
    }

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.