vue的elementUi,阻止日期时间组件el-date-picker,在手机端弹出输入法
三种方式:1. 设置el-date-picker的属性 editable="false"(1)有时可以有时不行。(2)组件内部还有两个input,没有被设置到。2.设置el-date-picker的属性 @focus="elDatePickerOnFocus"//禁止软键盘弹出elDatePickerOnFocus:function(){document.activeElement.blur();
·
三种方式:
1. 设置el-date-picker的属性 editable="false"
(1)有时可以有时不行。
(2)组件内部还有两个input,没有被设置到。
2.设置el-date-picker的属性 @focus="elDatePickerOnFocus"
//去掉input框获得的焦点
elDatePickerOnFocus:function(){
document.activeElement.blur();
},
(1)可以。
(2)组件内部还有两个input,没有被设置到。
3.沿用第二种的方法,通过js手动设置组件内部两个input的onfocus方法
// 延时1秒,等待日期组件被渲染
setTimeout(() => {
console.log("dom:")
// 获取日期组件
let inputs = document.querySelectorAll(".elDatePicker > input");
// 设置每个日期组件的onfocus方法,直接blur
inputs.forEach((input)=>{
// 加点颜色,判断选取的组件对不对
input.setAttribute("style","background-color:bisque");
input.onfocus =function(){
input.blur();
// 设置日期组件内部的两个input
setTimeout(() => {
let elDatePickers = document.querySelectorAll("body > div.el-picker-panel.el-date-picker.el-popper.has-time > div.el-picker-panel__body-wrapper > div > div.el-date-picker__time-header > span > div.el-input.el-input--small > input");
elDatePickers.forEach((elDatePicker)=>{
elDatePicker.setAttribute("style","background-color:bisque");
elDatePicker.onfocus =function(){
elDatePicker.blur();
}
})
}, 300);
}
})
}, 1000);
更多推荐
已为社区贡献4条内容
所有评论(0)