Esta pregunta se hizo antes, pero la solución provista es solo para jQuery , ya que estoy enfrentando el mismo problema en ReactJs.
¿Es posible deshabilitar la rueda de desplazamiento cambiando el número en un campo de número de entrada? Eliminé las flechas giratorias usando CSS, pero la rueda del mouse aún funcionaba y estropeaba la funcionalidad.
Quiero el number de tipo de entrada porque da teclado numérico en dispositivos móviles/táctiles.
No creo que esta sea la mejor solución si solo desea un teclado numérico, ya que hay una propiedad que le permite configurar el tipo de teclado que desee, por ejemplo, inputMode="numeric"
Cambiar eventos globales no es una buena práctica y tampoco lo es desdibujarse fuera del campo.
Respuesta más simple:
<input type="number" onWheel={(e) => e.target.blur()} /> e es la abreviatura de event .
Esto también funciona:
<input type="number" onWheel={() => document.activeElement.blur()} />Cualquiera de estos se puede usar en un componente funcional o de clase .
<input type="tel" pattern="[0-9]*" /> Puede usar <input type="tel" pattern="[0-9]*" /> y no recuerdo haber visto ningún pergamino, y también obtiene un teclado numérico en dispositivos móviles.
Puede desenfocar el campo en el controlador onWheel. Algo como esto
<input type='number' onWheel={ event => event.currentTarget.blur() } />En la versión de reacción, debe usar ref. Eche un vistazo al ejemplo a continuación:
import React, { Component, createRef } from "react"; class MyInput extends Component { constructor(props) { super(props); this.inputRef = createRef(); } onWheel = () => { this.inputRef.current.blur(); }; render() { return ( <div> My input number : <input type="number" ref={this.inputRef} onWheel={this.onWheel} /> </div> ); } } export default MyInput;Resolví esto usando un componente funcional que envuelve el elemento de input y agrega un detector de eventos para "wheel" y evita el comportamiento predeterminado. Encuentro esto preferible a usar blur() que puede tener una experiencia de usuario indeseable.
// Simply a wrapper for <input type="number"/> that disables scrolling to increment import { useEffect, useRef } from "react"; export const NumberInput = (props) => { const quantityInputRef = useRef(null); useEffect(() => { const ignoreScroll = (e) => { e.preventDefault(); }; quantityInputRef.current && quantityInputRef.current.addEventListener("wheel", ignoreScroll); }, [quantityInputRef]); return <input ref={quantityInputRef} type="number" {...props} />; }; En producción, en realidad uso este componente para deshabilitar el incremento de desplazamiento para el componente <TextField> de material-ui en lugar de <input> . He usado la entrada nativa en mi ejemplo porque de eso se trataba la pregunta.