Bootstrap

vue2/3定位光标位置,重新获取焦点

项目场景:

vue2/3定位光标位置,重新获取焦点


问题描述

在vue中我用到了elementui组件里的select选择器需要将光标定位到需要输入的地方,但是根据ui上面的方法是肯定没问题的,但是不能保证人人都是百分之百原模原样的生效

我就遇到了bug,我明明调用的这个focus重新获取焦点,但是网页报错大概意思是:这个组件没有定义的意思,网上也有说用定时器的这个定时器确实可以做到,但是也不是百分之百就能完全生效,我反正没解决还得自己找原因


原因分析:

我最开始使用的选择器来进行绑定的,id和class我都试了都是报错focus为null没有定义之类的错误,计时器也用了没解决但我肯定是绑定传值有问题,在网上搜了下关于focus不生效的原因发现,这里需要用ref来解决,具体操作如下:


解决方案:

<el-select ref="input_idname" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
																	
<el-option v-for="item in options" :key="item.value" :label="item.icd_code+' '+item.icd_name" :value="item.icd_name"@click="handleClickerss(item)"></el-option>
</el-select>

<el-select ref="input_idname" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                                                                    
<el-option v-for="item in options" :key="item.value" :label="item.icd_code+' '+item.icd_name" :value="item.icd_name"@click="handleClickerss(item)"></el-option>
</el-select> 

	const shortEdit=function(){					   
			_this.$refs.input_idname.focus()
		}

    const shortEdit=function(){                       
            _this.$refs.input_idname.focus()
        } 

最后将你的方法放到你需要调用的地方即可

;