取消Vue双击显示编辑状态时的文字选中

来源:网络 文章列表 2023-10-30 8
背景描述 在很多情况下我们都会遇到这种情况,input一开始是只读状态,当用户双击的时候我们就可以让用户来修改我们的属性,然后在失去焦点的时候保存数据,并将状态继续保持到只读状

背景描述

在很多情况下我们都会遇到这种情况,input一开始是只读状态,当用户双击的时候我们就可以让用户来修改我们的属性,然后在失去焦点的时候保存数据,并将状态继续保持到只读状态

问题分析

一般我用的状态切换是input中的disabled属性来实现只读的,但是当我们在从只读切换到编辑状态时,我们触发双击事件,但是双击事件他有默认行为(如我你的input中用value的话,他就会默认选中value,并让input失去焦点),然后你要手动点一下才会获取焦点

解决思路

  • 当切换状态的时候,我先吧我input中的value的值设置为空
  • 然后在$nextTick中通过DOM操作让元素获取焦点
  • 然后再把值,赋值回去

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接