由于用了框架的原因，用原生js直接赋值是修改不了表单的，或者你肉眼看上去你把表单修改了，但其实操作起来页面会出现问题，并且提交表单传给后端的内容其实并没有修改。因为直接赋值，vue是监听不到事件的，并不会修改表单内容。react也是同理。这时候不能采用直接赋值的方式，而需要使用触发事件的方式。由于使用Vue框架不同或者UI框架不同，可能某种js写法在vue上生效，但是在react上不生效，只能靠自己去思考尝试了。场景不一样，写的方式也不一样，代码不全，只分享思路。本文只针对自己遇到的情况作以下分享。
1、输入框填值
var event = document.createEvent('HTMLEvents');
event.initEvent('input', true, false);
var inputId=document.getElementById('inputId');
inputId.setAttribute('value', '输入框内容');
inputId.dispatchEvent(event);
//也可以使用inputId.dispatchEvent(new Event('input',{bubble:true,"bubbles": true, "cancelable": false}))，但是注意，IE浏览器不兼容new Event()
2、多行文本框填值
var event = document.createEvent('HTMLEvents');
event.initEvent('input', true, false);
var textareaId=document.getElementById('textareaId');
textareaId.innerHTML= '多行文本框内容';
textareaId.dispatchEvent(event);
//也可以使用inputId.dispatchEvent(new Event('input',{bubble:true,"bubbles": true, "cancelable": false}))，但是注意，IE浏览器不兼容new Event()
3、下拉框选中填值
var parentSelect = document.getElementById('parentId');
parentSelect.getElementsByClassName('ant-select-selection')[0].click();
//UI渲染需要一定的时间，获取动态生成的页面需要加一个宏任务
setTimeout(function () {
//通过观察发现下拉选择框的动态生成下拉选项的某个父级元素中有个id属性是和当前这个下拉选择框的类ant-select-selection的aria-controls属性是一一对应的，一样的，所以可以先得到动态生成的下拉选项的id。
var id = document.getElementById('parentId')
.getElementsByClassName('ant-select-selection')[0]
.getAttribute('aria-controls');
//根据id获取下拉选项
var li_nodes = document.getElementById(id).getElementsByClassName('ant-select-dropdown-menu-item');
//循环下拉选项，找到传入的被选中的对应的选项，并触发它的click事件
for (var j = 0; j < li_nodes.length; j++) {
var li_ele = li_nodes[j];
var text = li_ele.innerText.replace(/(^\s*)|(\s*$)/g, "");
if (text === "被选中的选项值") {
li_ele.click();
break;
};
};
})
4、单选按钮选中填值
var parentRadio = document.getElementById('parentRadioID');
var radioNodes = parentRadio.getElementsByClassName('ant-radio-wrapper');//获取一组单选按钮集合
var radioArr = [].slice.call(radioNodes, 0);//类数组转换为数组
var index = radioArr.findIndex(function (val) {
var text = val.innerText.replace(/(^\s*)|(\s*$)/g, '');
return text === '被选中的选项内容';
});
if (~index) {
radioNodes[index].click();
}
5、日期选中填值
//antd日历组件为3.X可以用如下方法，因为3.X日历组件选项有输入框，4.X没有，无法触发日历选项框的input事件去填值，触发enter事件去隐藏日历选项框，这点需要注意。
var event = document.createEvent('HTMLEvents');
event.initEvent('input', true, true);//创建一个input事件
var eventEnter = document.createEvent('Event');
eventEnter.initEvent('keydown', true, false);
eventEnter = Object.assign(eventEnter, {
ctrlKey: false,
metaKey: false,
altKey: false,
which: 13,
keyCode: 13,
key: 'Enter',
code: 'Enter'
});//创建一个enter事件
document.getElemntById('dateId').click();//触发日期控件input框的点击事件，为了吧日历组件显示出来
setTimeout(function () {
var ss_input = document.getElementsByClassName('ant-calendar-input')[0];
var len = ss_input.length;
ss_input[0].setAttribute('value', '具体日期' || undefined);
ss_input[0].dispatchEvent(event);
setTimeout(function () {
ss_input[0].dispatchEvent(eventEnter);//触发enter事件，让日历框选项隐藏
});
});
5、级联选中填值
上面我都只举了单个填值的例子，这里写的多个级联选中框填值的例子，因为业务需要，表单中可能会存在多个级联填值，但是这个和antd的下拉框通过对应的id去获取每个下拉框选项组件不一样。这个没有id唯一不同的可能就是绝对定位的高度不一样。所以我这里是按照顺序传入父级选项的input框和值，根据绝对定位去从小到大排序获取对应的级联选择框。然后按照传入的顺序一一对应上值。日历的话也可以参考这种思路，但是如果日历的placeholder不一样也可以根据placeholder的不同对应上，只要能找到一个可以唯一对应的标识点即可。
//递归触发级联选择框的点击事件（因为我自己业务是级联设置了点击，如果是hover，就触发hover事件）
function menuItemClick(dom, area, index) {
index = index || 0;
if (index > area.length || !area[index]) return;
var parentNodes = dom.querySelectorAll('.ant-cascader-menu')[index];
if (!parentNodes) return;
var nodes = parentNodes.querySelectorAll('.ant-cascader-menu-item')
for (var i = 0; i < nodes.length; i++) {
var text = nodes[i].innerText.replace(/(^\s*)|(\s*$)/g, "");
if (text === area[index]) {
nodes[i].click()
setTimeout(function () {
menuItemClick(dom, area, ++index)
})
}
}
};
function handleCascader(arr) {
for (var i = 0; i < arr.length; i++) {
var parentId = document.getElementById(arr[i].id)
parentId.querySelectorAll('.ant-cascader-input')[0].click()//触发父级级联input框的的点击事件，为了让级联选项框显示到页面上
}
setTimeout(function () {
var parentContents = [].slice.call(document.querySelectorAll('.ant-cascader-menus'));//获取级联选项框的集合，并转换为数组
//根据绝对定位的高度从大到小排序
parentContents.sort(function (a, b) {
return a.offsetTop - b.offsetTop;
})
//执行每个级联的选中对比填值
for (var i = 0; i < parentContents.length; i++) {
menuItemClick(parentContents[i], arr[i].value);
}
})
};
……省略
//方法调用，按从上到下的顺序依次传入
var cascaders=[
{
id: "PermanentAddrCode",
value: ['安徽', '合肥']
}，
{
id: "PermanentAddrCode",
value: ['天津', '和平区']
}
];
handleCascader(cascaders);
6、多选选中填值
var parentSelect = document.getElementById('parentId');
parentSelect.getElementsByClassName('ant-select-selection')[0].click();//触发多选组件里面的input框的click事件，为了在dom节点中获取多选组件的下拉选项框
var selectedValue = ['被选中的值1','被选中的值2','被选中的值3'] //需要被选中的值
setTimeout(function () {
var id = parentSelect.getElementsByClassName('ant-select-selection')[0]
.getAttribute('aria-controls');//获取多选组件下拉框选项的id
var li_nodes = document.getElementById(id).getElementsByClassName('ant-select-dropdown-menu-item');//获取下拉框选项节点集合
for (var j = 0; j < li_nodes.length; j++) {
var text = li_nodes[j].innerText.replace(/(^\s*)|(\s*$)/g, "");
var index = selectedValue.indexOf(text);//获取需要被选中的值在节点集合中的索引
var isSelected = li_nodes[j].className.indexOf('ant-select-dropdown-menu-item-selected');//判断当前节点是否已经被选中
if ((~index && isSelected === -1) || (index === -1 && ~isSelected)) {//当前值存在选项中并且未被选中，或者当前值已被选中但是当前选项中不存在
(
function (num) {
setTimeout(function () {
li_nodes[num].click();
});
}
)(j);//构建闭包传入j
}
};
});
7、月份组件选中填值
var time="YYYY-MM"//当前被选中的时间，到月
var monthId= document.getElementById('monthId');
var monthId_input = monthId.getElementsByTagName('input')[0];
if (!time) {
monthId_input .nextSibling.click();//如果传入时间为空，触发清空时间的那个小图标的click事件
return;
}
monthId_input .click();//触发月份组件的input框的click事件
setTimeout(function () {
var date = new Date(time);
var oldYear = date.getFullYear();
var oldMonth = date.getMonth();
var year = document.getElementsByClassName('ant-calendar-month-panel-year-select-content')[0].innerText;
var count = year - oldYear;
var months = document.getElementsByClassName('ant-calendar-month-panel-cell');
var dom = document.getElementsByClassName('ant-calendar-month-panel-' + (count > 0 ? 'prev' : 'next') + '-year-btn')[0];//根据count大小判断当前传入时间是小于还是大于月份组件打开的年份(year)，如果大于获取倒退那个图标的节点，如果小于获取前进那个图标的节点
for (var i = 0; i < count; i++) {
setTimeout(function () {
dom.click();//触发千金难或者倒退图标的事件，选中传入时间的年份
})
}
setTimeout(function () {
months[oldMonth].click();//选中传入的时间的月份
})
})
8、其他
有关event的了解可以看这篇dispatchEvent 学习 - 简书 (jianshu.com)。目前就这样，欢迎指正评论、交流。
上面有时候因为浏览器原因，或者js框架原因等等，可能会有input事件不触发、填值填不上去（有时候可能是虚假填值，这个时候怎么辨别某个表单选项呢，可以先聚焦当前选项，然后再触发该选项失焦事件、如果值还存在，表示值已经填充上去，否则值是没填上去的）的情况，这个时候可以修改input的事件为冒泡事件，填值如果通过document.getElementById('inputId').value='输入框的值'方式填值不上的话，就采用document.getElementById('inputId').setAttribute('value','输入框的值')，在填值不上就采用下面的方式赋值：
function setNativeValue(element, value) {
const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}
const prototype = Object.getPrototypeOf(element)
const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}
if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
prototypeValueSetter.call(element, value)
} else if (valueSetter) {
valueSetter.call(element, value)
} else {
throw new Error('The given element does not have a value setter')
}
}
注意：如果需要兼容IE浏览器,原生js尽力别使用es6语法，或者如果使用的话，一定要自己安装babel相关依赖,配置下babel转换规则，将脚本转换一下，如果要是使用了es7、es8相关语法，比如async await一定要引入polyfill,如果是脚手架安装了，将js引入也不会报错，否则在ie上使用会报错的。vue安装babel-polyfill,在mian.js引入import 'babel-polyfill';；react安装react-app-polyfill,在main.js最上方引入import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
网友评论