js 表单提交时 给 input 赋值与手动输入的区别

在 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);
   }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值