hidden类型的input控件onchange事件为何不起作用？

Posted 2023-04-13

如下：<input id="DISEASE" type="hidden" value="" onChange="assignName(this)" />，这种用法当input控件的value值改变时，onChange中注册的事件竟然没有触发。而将onChange换成onpropertychange后，方法就被触发了。

参考技术A onchange触发事件是当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
onpropertychange则是当前对象属性发生改变，都会触发事件，但是它是IE专属的 参考技术B 既然隐藏，难道onchange是代码调用？既然代码调用，何必非要通过绑定这个事件来执行。。。追问

onChange不是代码调用，我在另外的代码中为隐藏的input赋值。

追答

从网上大量的资料反馈来看，hidden的onchange在input value发生变化时确实不会触发，当作浏览器的默认习惯记下来吧。
直接搜索input hidden onchange就有

追问

这样啊，看来onchange事件是不能用了，那你知道input的哪个事件能够支持hidden类型input的value发生改变时，会触发事件所注册的方法，除了onpropertychange事件外。

本回答被提问者采纳

react input 输入中文拼音和onChange事件的交互

需求：封装Input组件，输入拼音过程不触发onChange，拼音输入结束才触发onChange
原理：输入拼音过程触发composition事件，英文/数字输入不触发，而onChange两者都触发，用一个锁控制onChange的时机
问题：无法做到MyInput只向外暴露onChange事件，且使得MyInput受控
解决受控问题参考：react根据中文获取拼音_解决 React 中的 input 输入框在中文输入法下的 bug

Input组件：

// MyInput.jsx

import { Component } from "react";

class Input extends Component {
    constructor(p) {
        super(p);

        this.lock = false;
    }

    componentDidMount() {
        this.setInputValue();
    }

    componentDidUpdate(pp) {
        if (this.props.value !== pp.value) {
            this.setInputValue();
        }
    }

    handleCompositionStart = () => (this.lock = true);

    handleCompositionUpdate = () => (this.lock = true);

    setInputValue = () => {
        const { value } = this.props;
        this.refs.input.value = value;
    };

    handleCompositionEnd = (e) => {
        // const { onChange } = this.props;
        // let input = e.target.value;
        this.lock = false;

        // onChange(input);
    };

    handleChange = (e) => {
        const { onChange } = this.props;
        let input = e.target.value;

        if (!this.lock) {
            onChange(input);
        }
    };

    render() {
        return (
            <input
                ref="input"
                onCompositionStart={this.handleCompositionStart}
                onCompositionUpdate={this.handleCompositionUpdate}
                onCompositionEnd={this.handleCompositionEnd}
                onChange={this.handleChange}
            />
        );
    }
}

export default Input;

使用：

// App.jsx
const App = () => {
    const [input, setValue] = useState("");
    
    return <MyInput onChange={handleChange} value={input}/>;
};