[前端] 通过 JS 直接改变 input 的 value，在提交表单的时候无法通过校验：提示 input 的值不能为空，有解决办法吗 - V2EX
2022-11-14 15:23:13 Author: v2ex.com(查看原文) 阅读量:29 收藏

请问这个问题出现的原因是什么呢？
通过 JS 直接改变 value 与用户手动输入有什么区别呢？能否通过 JS 来模拟用户真实的输入呢？
拜托大家了🙏🙏

wunonglin

1

wunonglin      3 小时 47 分钟前

用 stackBlitz 之类的工具，附上代码
shuxhan

2

shuxhan      3 小时 23 分钟前

不太可能出现你这种情况，除非校验的方式是判断失去焦点时获取 value
cydysm

4

cydysm      3 小时 17 分钟前 via iPhone

不知道你是用了框架还是用了原生 js 开发
之前在 vue 中业务也有这个需求，在改变值后 emit change input 事件
snimstice

5

snimstice      3 小时 10 分钟前

@cydysm 页面是其他人的，我是给这个页面开发一个 chrome 的插件，帮助填写工单的。不太清楚这个页面的代码是怎么写的，但是确认没用 vue
snimstice

8

snimstice      3 小时 6 分钟前

@wunonglin 感谢，但是我没有代码。我开发的是 chrome 插件，辅助用户填写表单的。通过 js 改变 input 的 value ，改了之后死活通不过那个页面上表单项的校验
eason1874

9

eason1874      2 小时 57 分钟前

几年前遇到过，基本就是两种情况

一是赋值和取值方式不兼容，记不清了，反正就是 attr 之类的，取不到

二是输入表单并非提交表单，输入框监听键入事件，键入时把值同步到真正提交的表单，如果你直接修改输入框的值那就没发生键入事件，那就不会同步，所以真正提交的还是空

兼容性最好的方法就是模拟键盘输入
sharida

10

sharida      2 小时 49 分钟前

/**
* 触发 dom 的 input 事件
* @param {Element} ele dom 元素
*/
function dispatchInputEvent(ele) {
const inputEvent = new InputEvent('input');
ele.dispatchEvent(inputEvent);
}

试试
18601294989

12

18601294989      2 小时 13 分钟前

如果是 React 写的可以试试 这段代码

function changeReactInputValue(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);
}
snimstice

14

snimstice      57 分钟前

@eason1874
el.addEventListener('input', e => {
console.log('input trigger: ', e)
})
el.setAttribute('value', value)
el.value = value
const inputEvent = new InputEvent('input');
el.dispatchEvent(inputEvent);

请问我这样写算是模拟键盘输入吗？我监听的事件可以触发，但是最终表单校验还是没有通过

文章来源: https://v2ex.com/t/895063#reply16
如有侵权请联系:admin#unsafe.sh