tengo un cuadro de texto sólo quieren aceptar «Número» y «.[dot]» el uso de Vue.js cualquiera puede ayudar a que el código? soy nuevo en vue.

  • Sé que es una pregunta vieja, pero fue superior en los resultados de Google. Así que aquí es una solución para los usuarios con problemas similares. Yo creo que todas las soluciones son complicadas. Lo más sencillo es añadir @de eventos de entrada y reemplazar todos los no-dígitos y punto. this.message.replace(/[^0-9.]/g,'');. Aquí es un el violín para demostrar.
  • permite múltiples puntos = problema.

9 Comentarios

  1. 37

    Puede escribir un Vue método y que el método puede ser llamado en el keypress evento. Echa un vistazo este violín.

    Actualización:

    la adición de código fuente:

    HTML

    <div id="demo">
      <input v-model="message" @keypress="isNumber($event)">
    </div>

    Vue.js

    var data = {
      message: 1234.34
    }
    
    var demo = new Vue({
      el: '#demo',
      data: data,
      methods: {
        isNumber: function(evt) {
          evt = (evt) ? evt : window.event;
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
            evt.preventDefault();;
          } else {
            return true;
          }
        }
      }
    });
    • el código aún puede de entrada a excepción de «número» y «.»
    • Como qué? ¿Has comprobado el violín?
    • todavía puedo carácter de entrada como a, b, c
    • Cómo? Me parece que no puede escribir nada.
    • ¿Intenta el violín ? Me pueden escribir y ver que sólo permite el número y punto.
    • Con el fin de no permitir que el período de cambio charCode !== 46 a charCode === 46
    • Con el fin de hacer que funcione en Firefox reemplazar isNumber(event) a isNumber
    • He implementado esta y funciona bien excepto por una cosa. Tuve que definir eventos en los datos o se iba a tirar un error de la consola. Simplemente he añadido «evento»: null», y no más errores!
    • En realidad, la unión debe ser v-on:keypress="isNumber($event)"
    • Qué parte debo cambiar para evitar puntos? Solo necesito los números de
    • Esto no funciona en Firefox. También se muestra la consola de advertencia. La sustitución de isNumber(evento) con isNumber($evento) como tanathos sugirió soluciona ambos problemas y funciona en Chrome y Firefox.
    • He intentado en su js violín, y me puede dar entrada a más de 1 periodo. Debe ser 1 solo. Cómo hacerlo?
    • Cómo manejar este pegue?
    • Esto no manejar pegar cadena aleatoria.

  2. 9

    Corto y fácil de entender.

    HTML

     <input @keypress="onlyNumber" type="text">
    

    VUE JS

    onlyNumber ($event) {
       //console.log($event.keyCode); //keyCodes value
       let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
       if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { //46 is dot
          $event.preventDefault();
       }
    }
    
    • Esta forma de «Retroceso» keypress tampoco es permitido. Lo que si quiero borrar el número anterior y agregar otro?
    • Usted puede comprobar el código de la clave de uso de este código de la consola.log($evento.el código de la tecla); //valor de códigos de teclas
  3. 7

    Usted debe cambiar su entrada a type="number" para reflejar con más precisión su comportamiento. Usted puede utilizar el built-in Vue.js la directiva v-model.number.

    Uso:

    <input type="number" v-model.number="data.myNumberData"/>
    
    • Esto debe ser aceptado respuesta. No hay necesidad de reinventar la rueda.
    • Algunos navegadores tienen onScroll para type=number, que de incremento/decremento de los valores.
    • El uso de type=number no es siempre una buena solución para la entrada de datos numéricos como el navegador de estilo en el cuadro de entrada de forma diferente y agregar incremento/decremento de los botones.
    • esta respuesta de trabajo, pero sólo un carácter (E) se permita entrar. ¿por alguna razón?
    • Científicos notaciones como el 1.2 e-1, que es de 0,12
    • Esto permite a las entradas con varios decimales, tales como 1.2.3.4.5

  4. 5

    He resuelto problema como el tuyo a través de vue.js los filtros. Primero he creado filtro – digamos que en filters.js archivo

    export const JustDigits = () => {
      Vue.directive('digitsonly', (el, binding) => {
        if (/[\d\.]+/i.test(el.value)) {
          console.log('ok');
        } else {
          let newValue = el.value.replace(/[a-zA-Z]+/ig, '');
          el.value = newValue;
          console.log('should fix', newValue);
          binding.value = el.value;
        }
      });
    };
    

    A continuación, en el componente donde esta funcionalidad es necesario que hice:

    import {
      JustDigits
    } from './filters';
    
    JustDigits();
    

    Y, a continuación, usted es capaz de utilizar esta directiva en plantilla:

     <input  v-model="myModel"
             v-digitsonly
             type="text"  
             maxlength="4"  class="form-control" id="myModel" name="my_model" />
    

    Por favor, tenga en cuenta, que mi regex pueden diferir de lo que usted necesita, no dude en modificar ella, así como la línea de código let newValue = el.value.replace(/[a-zA-Z]+/ig, ''); que elimina caracteres de la cadena. He publicado es solo para mostrar una de las posibles soluciones vue.js proporciona a resolver la tarea como esta.

    • si escribe más de una carta, la segunda que a veces uno pasa a través de.
    • Usted puede evitar el escribir rápido caracteres adicionales obtener aunque poniendo el valor en medio segundo o así que de rebote (la importación de lodash o unserscore) antes de comprobar que
  5. 2

    Aquí es una mejor manera de manejar el específico de la pregunta (los números y los «puntos» solamente) por el ajuste de v-restringir.número.decimal usando la siguiente directiva. También tenía algunas código de bono de apoyo alfa sólo o alfanuméricos. Usted también podría permitir sólo los «puntos» aunque no sé por qué. No se permiten caracteres adicionales para «colarse a través de» si al escribir rápido. También soporta copiar/pegar, eliminar, y algunas otras claves de los usuarios esperan seguir trabajando a partir de una entrada:

    Vue.directive('restrict', {
      bind (el, binding) {
        el.addEventListener('keydown', (e) => {
          //delete, backpsace, tab, escape, enter,
          let special = [46, 8, 9, 27, 13]
          if (binding.modifiers['decimal']) {
            //decimal(numpad), period
            special.push(110, 190)
          }
          //special from above
          if (special.indexOf(e.keyCode) !== -1 ||
            //Ctrl+A
            (e.keyCode === 65 && e.ctrlKey === true) ||
            //Ctrl+C
            (e.keyCode === 67 && e.ctrlKey === true) ||
            //Ctrl+X
            (e.keyCode === 88 && e.ctrlKey === true) ||
            //home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            return //allow
          }
          if ((binding.modifiers['alpha']) &&
            //a-z/A-Z
            (e.keyCode >= 65 && e.keyCode <= 90)) {
            return //allow
          }
          if ((binding.modifiers['number']) &&
            //number keys without shift
            ((!e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) ||
            //numpad number keys
            (e.keyCode >= 96 && e.keyCode <= 105))) {
            return //allow
          }
          //otherwise stop the keystroke
          e.preventDefault() //prevent
        }) //end addEventListener
      } //end bind
    }) //end directive
    

    A utilizar:

    <!-- number and decimal -->
    <input
      v-model="test"
      v-ep-restrict.number.decimal
      ...
    />
    
    <!-- alphanumeric (no decimal) -->
    <input
      v-model="test2"
      v-ep-restrict.alpha.number
      ...
    />
    
    <!-- alpha only -->
    <input
      v-model="test3"
      v-ep-restrict.alpha
      ...
    />
    

    Esto puede ser modificado para servir como una base para casi cualquier escenario y una buena lista de códigos de tecla aquí

    • Me encanta esta respuesta, pero puede ser actualizado a cuenta para el código de la tecla ser despreciado?
  6. 2

    Necesitaba mi entrada para permitir sólo dígitos, por lo que no e símbolo, más, menos o o .. Vue parece cobarde y no volver a activar @onkeypress de símbolos como dot.

    Aquí está mi solución a este problema:

    <input
      onkeypress="return event.key === 'Enter'
        || (Number(event.key) >= 0
        && Number(event.key) <= 9"
      type="number"
    >
    

    Estoy tomando sólo dígitos, la limitación de 0 a 9, pero también quiero a habilitar la forma de presentar en la entrada, que serían excluidos con el enfoque anterior, y el entrar.

  7. 1

    Una manera simple de hacer esto en una sola línea:

    IsNumber(event) {
      if (!/\d/.test(event.key) && event.key !== '.') return event.preventDefault();
    }
    
  8. 1

    La construcción de soluciones anteriores, para evitar que múltiples posiciones decimales, también pasar a la v-modelo de la función:

    <input v-model="message" v-on:keypress="isNumber($event, message)">

    y modificar el isNumber método de la siguiente manera:

    isNumber(event, message) {
      if (!/\d/.test(event.key) &&  
        (event.key !== "." || /\./.test(message))  
      )  
        return event.preventDefault();  
    }
    

    Para limitar el número de dígitos después del decimal agregar la siguiente línea en el isNumber método:

     if (/\.\d{2}/.test(message)) return event.preventDefault();
    

    La \d{2} limita la entrada de dos dígitos. El cambio esta a \d{1} a limitar a uno.

    Como se indica en otras respuestas, esto no impide que el encolamiento de datos no numéricos.

  9. 0

    Yo no la solución perfecta, ya que algunos trabajan para inputing pero no para el copy&paste, algunos son de la otra manera alrededor. Esta solución funciona para mí. Previene número negativo, escribir «e», copy&paste «e» de texto.

    Yo uso mixin, así que puede ser resued en cualquier lugar.

    const numberOnlyMixin = {
      directives: {
        numericOnly: {
          bind(el, binding, vnode) {
    
            //console.log(el, binding);
    
            //this two prevent from copy&paste non-number text, including "e".
            //need to have both together to take effect.
            el.type = 'number';
            el.addEventListener('input', (e) => {
              //console.log('input', e);
              //console.log(el.validity);
              return el.validity.valid || (el.value = '');
            });
    
            //this prevents from typing non-number text, including "e".
            el.addEventListener('keypress', (e) => {
              let charCode = (e.which) ? e.which : e.keyCode;
              if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
                e.preventDefault();
              } else {
                return true;
              }
            });
          }
        }
      },
    };
    
    export {numberOnlyMixin}
    

    En su componente, añadir a su entrada.

    <input v-model="myData" v-numericOnly />
    

Dejar respuesta

Please enter your comment!
Please enter your name here