Question

有一个网站可以创建如下元素并附加 onchange 函数

o.createElement(k.InputField, {
                label: "Enter mobile number",
                variant: "secondary",
                value: i.trim(),
                disabled: v,
                InputProps: {
                  onChange: ({ target: { value: e } }) => {
alert("testing");
                  },
                  maxLength: 10,
                  autoFocus: !0,
                  id: "mobileNum",
                },
                error: Ve.mobileNumberValidationMessage(f, String(i)),
                before: o.createElement(k.Text, { variant: "body", color: "text.2" }, "+", 91),
                css: Ct,
              })

我尝试了一切来触发它，只有当我在键盘上输入时才会触发警报。我什至循环了像下面这样的所有事件，但没有任何东西触发它

 const inputElement = document.getElementById("mobileNum");

                  // Step 2: Set its value programmatically
                  const newValue = "9"; // Example new value
                  inputElement.value = newValue;
const eventTypes = [
    "input",        // Input event when the value of an input element changes
    "change",       // Change event when the value of an input element changes and loses focus
    "keydown",      // Keydown event when a key is pressed down
    "keyup",        // Keyup event when a key is released
    "keypress",     // Keypress event when a key is pressed
    "click",        // Click event when a mouse click occurs
    "dblclick",     // Double click event when a mouse double click occurs
    "mousedown",    // Mousedown event when a mouse button is pressed down
    "mouseup",      // Mouseup event when a mouse button is released
    "mousemove",    // Mousemove event when the mouse pointer is moved
    "mouseover",    // Mouseover event when the mouse pointer enters an element
    "mouseout",     // Mouseout event when the mouse pointer leaves an element
    "wheel",        // Wheel event when the mouse wheel is scrolled
    "contextmenu",  // Contextmenu event when the right mouse button is clicked
    "touchstart",   // Touchstart event when a finger touches the screen
    "touchend",     // Touchend event when a finger is removed from the screen
    "touchmove",    // Touchmove event when a finger is dragged across the screen
    "touchcancel",  // Touchcancel event when a touch event is interrupted
    "focus",        // Focus event when an element gains focus
    "blur",         // Blur event when an element loses focus
    "submit",       // Submit event when a form is submitted
    "reset",        // Reset event when a form is reset
    "resize",       // Resize event when the window or element is resized
    "scroll"        // Scroll event when the window or element is scrolled
];

eventTypes.forEach(eventType => {
    const event = new InputEvent(eventType, {
        inputType: "insertText",
        data: newValue,
        bubbles: true,
        composed: true
    });
    inputElement.dispatchEvent(event);
});

它所做的只是在输入中键入内容，但它不会在 onChange 中发出警报，但如果我按退格键或手动键入某些内容，它就会发出警报。

我如何在此输入上展示真实的打字行为。谢谢。

“有一个网站”？是你的网站吗？你能修改一下吗？另外，听起来您想以编程方式触发，而不是手动触发。退格是手动的。 — 
不是我的网站，我正在尝试在外部网站上进行测试，我正在尝试通过开发人员控制台以编程方式执行此操作。 —

Answer 1

这可能是在您尝试触发事件时 DOM 尚未完全加载的情况。当您手动更改字段时它会起作用，因为那时 DOM 肯定已加载。但否则，您可能会在实际绑定事件之前以编程方式尝试触发该事件。

例如，在 jQuery 中，有一个 $(document).ready() 函数，该函数在 DOM 加载后执行。如果您不使用 jQuery，那么一种选择是使用 body 标记来引用 onload 函数：

<body onload="javascript:triggerChange()">

triggerChange 函数将包含触发事件的代码。

不，页面完全加载后我正在通过开发人员控制台测试它 —

Answer 2

您想要的可能是“如何触发可信输入”，这个很简单，您可以用于document.execCommand()此目的。例如

document.getElementById('mobileNum').focus();
document.execCommand('insertText', false, "9837585855");
document.getElementById('getOtp').click();

编辑

在我看来，即使上述方法已被弃用，它仍然有效，并且暂时不应该成为问题，但我不确定您想要什么用例。所以这里我提供另一种方法：

const input = document.getElementById('mobileNum');
Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set.call(input, "9837585855");
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
document.getElementById('getOtp').click();

您好，它有效，既然它已被弃用，您能提供一些替代方案吗？ —

Answer 3

非常简单->不需要使用任何特殊功能。您所需要做的只是通过使用并调度事件value将的设置input为您的手机号码。（如果您不想自动单击发送 OTP 按钮，请删除最后一行 ( )）setAttributeinput.click

const input= document.getElementById("mobileNum");
input.setAttribute("value", '9192939495');
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
document.getElementById('getOtp').click();

Answer 4

您可以手动调用该方法：

inputElement.onchange()

如果这不起作用，请尝试使用 .onChange() 。

例子：

let input = document.getElementById('input')
input.onchange = () => alert('test')
function triggerChange(){
input.onchange()
}

<p>Type or click the button to trigger change: </p>
<input id="input">
<button onclick="triggerChange()">Trigger change</button>

javascript – 手动触发事件 – 代码日志

4 个回答
4

编辑

4 个回答 4

编辑

4 个回答
4