在 JavaScript 中,给 <input> 元素赋值与用户手动输入之间存在一些关键的区别,尤其是在事件触发、表单提交和元素状态方面。 1. 事件触发 手动输入: 当用户在输入框中输入内容时,会触发一些特定的事件,例如 input、change 和 keydown 等事件。这些事件可以用于实时更新 UI 或验证输入。 JavaScript 赋值: 当使用 JavaScript 直接给输入框赋值时,不会触发上述事件。例如,使用 input.value = '新值' 将不会触发 input 或 change 事件。 2.实现js赋值并触发事件和手动输入效果一样 直接给输入框赋值。 创建 input 事件并使用 dispatchEvent 方法触发它。 创建 change 事件并使用 dispatchEvent 方法触发它 const input = document.getElementById('myInput'); // 监听 input 事件 input.addEventListener('input', () => { console.log('input 事件触发:', input.value); }); // 监听 change 事件 input.addEventListener('change', () => { console.log('change 事件触发:', input.value); }); // 通过 JavaScript 赋值并触发事件 document.getElementById('setValueButton').addEventListener('click', () => { // 设置输入框的值 input.value = '通过 JS 赋值的内容'; // 创建并触发 input 事件 const inputEvent = new Event('input', { bubbles: true }); input.dispatchEvent(inputEvent); // 创建并触发 change 事件 const changeEvent = new Event('change', { bubbles: true }); input.dispatchEvent(changeEvent); });
直接赋值并触发
var input = document.querySelector('div.loginForm input[placeholder="请输入账号"]');
input.value = "%s";
var inputEvent = new Event('input', { bubbles: true });
input.dispatchEvent(inputEvent);
var changeEvent = new Event('change', { bubbles: true });
input.dispatchEvent(changeEvent);
var password = document.querySelector('div.loginForm input[placeholder="请输入密码"]');
password.value = "%s";
var inputEvent1 = new Event('input', { bubbles: true });
password.dispatchEvent(inputEvent1);
var changeEvent1 = new Event('change', { bubbles: true });
password.dispatchEvent(changeEvent1);
var check = document.querySelector("div.el-form-item__content>label.el-checkbox");
if(check && check.getAttribute('class').indexOf('is-checked') == -1){check.click()}
解决 js 给input的value赋值后,鼠标点击input输入框,内容被清除
function changInputValue(inputDom, newText) {
let lastValue = inputDom.value;
inputDom.value = newText;
let event = new Event('input', { bubbles: true });
event.simulated = true;
let tracker = inputDom._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
inputDom.dispatchEvent(event);
}
var emailInput = document.querySelector('div.box_tf>input[name="new_password"]');
if (emailInput) {
changInputValue(emailInput, '123456');
}
# select>option 选择
//select标签
var selectElement = document.querySelector('div.Polaris-Select>select.Polaris-Select__Input[id*=":r"]');
if (selectElement) {
//具体option标签
selectElement.querySelector('option[value="AM"]').selected = true;
let event = new Event('change', {
bubbles: true, // 事件能够冒泡
cancelable: true// 事件可以取消
});
event.simulated = true;
selectElement.dispatchEvent(event);
}