Запустить событие вручную
Существует веб-сайт, который создает элементы, подобные приведенным ниже, и присоединяет к ним функцию 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);
});
Все, что он делает, это вводит ввод, но он не предупреждает об изменении, но если я нажимаю клавишу Backspace или печатаю что-то вручную, он предупреждает.
Как мне продемонстрировать реальное поведение при наборе текста на этом входе?
Это не мой веб-сайт, я пытаюсь провести тестирование на внешнем веб-сайте, я пытаюсь сделать это программно через консоль разработчика.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Это может быть случай, когда DOM еще не полностью загружен в момент, когда вы пытаетесь вызвать событие. Это работает, когда вы меняете поле вручную, потому что DOM в это время наверняка загружен. Но в противном случае вы можете программно попытаться вызвать событие до того, как оно будет фактически привязано.
Например, в jQuery есть функция $(document).ready(), которая выполняется после загрузки DOM. Если вы не используете jQuery, одним из вариантов может быть использование тега body для ссылки на функцию загрузки:
<body onload = "javascript:triggerChange()">
Функция триггерChange будет содержать ваш код для запуска события.
Нет, я тестирую его через консоль разработчика после полной загрузки страницы.
Вероятно, вам нужно «как активировать доверенный ввод», и это просто, для этого вы можете использовать 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();
К вашему сведению, document.execCommand устарел: Developer.mozilla.org/en-US/docs/Web/API/document/execCommand
Привет, это работает, можете ли вы предложить какие-нибудь альтернативы, поскольку они устарели?
@Graciewilliams, пожалуйста, проверьте мое редактирование выше
@Damzaky, редактирование работает так, как ожидалось, можете ли вы рассказать, что вы сделали во второй строке.
Очень просто-> Нет необходимости использовать какие-либо специальные функции. Все, что вам нужно сделать, это просто установить value из input на номер вашего мобильного телефона с помощью setAttribute и отправить событие input. (Удалите последнюю строку (.click), если вы не хотите автоматически нажимать кнопку отправки OTP)
const input= document.getElementById("mobileNum");
input.setAttribute("value", '9192939495');
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
document.getElementById('getOtp').click();
ах да, это работает ~~игнорируйте ответное сообщение, отправленное на ваш телефон, потому что я его проверял~~
Вы можете вручную вызвать метод:
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>Как мне получить репутацию 300?
У вас очень конкретная цель, поэтому ответ может быть очень прямым.
Этот сайт использует ReactJS, который на серверной части может выглядеть как нечто одно, но на стороне браузера всегда интерпретируется как обычный JavaScript. Я проверил элемент input, сослался на него в консоли, он содержит атрибут __reactEventHandlers$probablyrandomtext, который сам по себе является объектом, включающим функцию onChange, отвечающую за управление оповещениями, которые вы видите только при вводе текста.
const mobileNum=document.getElementById('mobileNum')
const reactEventHandler=Object.keys(mobileNum)
.filter(u=>u.includes('reactEventHandler'))[0]
const orig=mobileNum[reactEventHandler].onChange
//USAGE
orig({target:{value:""}}) //blank example
orig({target:{value:"1234"}}) //not enough digits example
orig({target:{value:"1231231234"}}) //incorrect number example
Хорошего дня :D
«Есть сайт»? Это ваш сайт? Можете ли вы изменить его? Кроме того, похоже, что вы хотите запускать программно, а не вручную. Возврат осуществляется вручную.