1、场景
最近公司开发网盘系统时,一个常见的需求。选中文件夹,点击重命名时,input输入框自动获取焦点同时默认选中文字。 一个简单的模拟如下。
2、bug产生原因
重新理解上面代码,当bl为true时,点击重命名bl为false此时是先执行rename中的代码this.bl === false?el.select():''然后才是视图中input的disabled变为flase。因此出现问题。即执行this.bl === false?el.select():''这行代码时,视图中的input依然为disable=true,还没有更新为false,而input被禁用时select()事件时不能触发的,因此出现问题。
3、解决方法。
3.1自定义指令的方法。如下
3.2更简单的方法
3.2.1将this.bl === false?el.select():''放在this.$nextTick(() => {}中
3.2.2直接把this.bl === false?el.select():''放在一个setTimeout也能简单粗暴的解决。
4、一个更有意思的发现
刚开始查找原因时发现在ie中即使是一开始的写法,也能实现功能。查找资料发现,在ie中select()事件,即使是在input框disabled时,也是可以触发的。因此才会出现ie中可以实现功能的现象。