Safari（桌面/移动端）onChange事件不触发问题及适配方案求助

核心问题分析 #

Safari对textarea的change事件触发时机与Chrome存在差异，尤其是自动高度封装的组件（如TextareaAutosize）可能因内部实现导致事件绑定失效，仅在失焦时才触发。

最优兼容方案 #

1. 替换为onInput事件（推荐） #

直接使用onInput替代或补充onChange，onInput是HTML原生事件，在Safari中能实时响应内容变化（包括键盘输入、粘贴、拖拽等），行为与Chrome一致。

修改组件代码：

return (
    <TextareaAutosize
        aria-label='textInput'
        className='editor-input-line'
        id={`input-${lineNumber}`}
        type='text'
        onInput={onChange}
        onChange={onChange} // 兜底处理特殊场景（如部分旧版浏览器）
        data-testid="testEditorLine"
    ></TextareaAutosize>
);

2. 手动绑定原生input事件（绕过组件封装坑） #

如果组件自身的事件绑定存在兼容性问题，可通过React的ref直接给textarea元素绑定原生事件：

import { useRef, useEffect } from 'react';

// 组件内部逻辑
const TextareaLine = ({ lineNumber, onChange }) => {
    const textareaRef = useRef(null);

    useEffect(() => {
        const handleInput = (e) => {
            onChange(e);
        };
        const element = textareaRef.current;
        if (element) {
            element.addEventListener('input', handleInput);
            return () => element.removeEventListener('input', handleInput);
        }
    }, [onChange]);

    return (
        <TextareaAutosize
            ref={textareaRef}
            aria-label='textInput'
            className='editor-input-line'
            id={`input-${lineNumber}`}
            type='text'
            data-testid="testEditorLine"
        ></TextareaAutosize>
    );
};

3. 防抖优化（应对多行性能问题） #

若担心频繁触发计算导致性能下降，可给处理函数添加防抖逻辑，平衡实时性与性能：

方案1：使用lodash的debounce

import { useCallback } from 'react';
import debounce from 'lodash/debounce';

// 父组件中定义防抖处理函数
const debouncedOnChange = useCallback(
    debounce((e) => {
        // 原处理逻辑：解析输入字符串、生成等式、计算结果
        const inputValue = e.target.value;
        // 执行计算并更新状态
    }, 100), // 100ms延迟可根据需求调整
    []
);

方案2：自定义防抖Hook

import { useCallback, useRef } from 'react';

const useDebounce = (callback, delay) => {
    const timeoutRef = useRef(null);
    return useCallback((...args) => {
        clearTimeout(timeoutRef.current);
        timeoutRef.current = setTimeout(() => callback(...args), delay);
    }, [callback, delay]);
};

// 使用示例
const debouncedOnChange = useDebounce((e) => {
    // 处理逻辑
}, 100);

验证建议 #

• 在Safari桌面端及移动端测试输入、粘贴、删除等操作，确保实时计算正常触发；
• 测试多行场景下的流畅度，调整防抖延迟至合适数值（如50-150ms）。

内容的提问来源于stack exchange，提问作者Chartley