取消Vue双击显示编辑状态时的文字选中
背景描述
在很多情况下我们都会遇到这种情况,input一开始是只读状态,当用户双击的时候我们就可以让用户来修改我们的属性,然后在失去焦点的时候保存数据,并将状态继续保持到只读状
背景描述
在很多情况下我们都会遇到这种情况,input一开始是只读状态,当用户双击的时候我们就可以让用户来修改我们的属性,然后在失去焦点的时候保存数据,并将状态继续保持到只读状态
问题分析
一般我用的状态切换是input中的disabled属性来实现只读的,但是当我们在从只读切换到编辑状态时,我们触发双击事件,但是双击事件他有默认行为(如我你的input中用value的话,他就会默认选中value,并让input失去焦点),然后你要手动点一下才会获取焦点
解决思路
- 当切换状态的时候,我先吧我input中的value的值设置为空
- 然后在$nextTick中通过DOM操作让元素获取焦点
- 然后再把值,赋值回去
版权声明
本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。
评论