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

最新推荐文章于 2023-06-07 11:27:19 发布
最新推荐文章于 2023-06-07 11:27:19 发布
阅读量4.4k 收藏 4
点赞数 15
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDNzhaojiale/article/details/117563696
版权

背景描述

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

问题分析

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

解决思路

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

最终效果

在这里插入图片描述

虽然问题解决了，但是效果仍不是太好，有好的解决思路，欢迎来评论。

GGCoder
关注
专栏目录
在组件里面绑定事件 vue去除双击选中效果
Guanerye0314的博客
02-19 248
*webkit浏览器*/-khtml-user-select: none;// 去除双击选中效果。
vue禁止双击选中文字
jhfvuyhgui的博客
04-10 708
【代码】vue禁止双击选中文字。
Vue中div contenteditable 的光标定位方法
10-18
今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
取消双击等选中文字事件
u011200562的博客
04-21 862
屏蔽双击事件，取消选中事件 css中添加如下样式 div{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } 如果是ie10以下可能还需要在元素上添加 onselectstart=“return false” 代码。 ...
前端学习-双击禁止选定文字
Zty_3184的博客
09-27 424
禁止双击选中文字使用window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
vue/javascript 实现拖动功能是文字总会被选中的问题
wenbintian的博客
06-24 4115
你们是否遇到过按住鼠标左键拖动div块时经常页面上的文字会被选中了，这样造成了不好的开发体验。以下实例能帮你们解决这一问题。 //鼠标按下的事件 onMousedown(event, column) { const resizeProxy = this.$refs.resizeProxy; resizeProxy.style.left = this.d...
vue点击取消再点击选中（单选）
qq_46617584的博客
09-07 433
vue点击取消再点击选中（单选）
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在这个场景下，我们将探讨如何利用Vue和IView实现一个具有拖拽和双击编辑功能的Tree组件。 首先，让我们了解一下`Tree`组件。在Web应用中，`Tree`组件通常用于展示层级关系的数据，如文件系统、组织结构等。IView中...
Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框...
anchenhe9360的博客
03-05 2221
实现这三个功能的踩坑记录。 1. 需求 在Vue中，有一个input， 双击时编辑文本，点击该input节点外的其他地方，则取消编辑。 那么这里有三个要实现的地方 第一是双击显示编辑框。 第二是自动聚焦点击的显示框。 第三是点击编辑框外的地方，隐藏编辑框。 一二点都是在startPipeLineNameEdit这个method中去实现。 2. 实现双击显示编辑框 思路： 使用两个sp...
vue el-table实现行内编辑功能
10-15
如果处于编辑状态，显示“保存”和“取消”按钮。 ```html !scope.row.isSet" ...>{{ $t('common.edit') }} <el-button v-else ...>{{ $t('common.save') }} <!-- 删除按钮逻辑同上 --> !scope.row.isSet" ......
Vue - 最新详细实现点击按钮（笔图标）可编辑 input 输入框，点击文字内容后变成 ＜input＞ 输入框同时能修改和取消、删除（详细示例代码，一键复制运行）
王佳斌
07-06 8637
本文将提供给您一个健壮且代码注释详细的组件源码，无样式只写了核心功能，您直接复制，然后按照自己的需求去 更改样式与逻辑，如下图所示：这样的基础示例，更有利于您进行修改和学习！打开 文件夹，在里面建立一个 文件，复制以下代码。 使用示例 随便找个页面，运行起来。 SEO vueinput实现点击按钮文字增删功能，关于vue点击对输入框进行编辑相关内容,包含vue点击对输入框进行编辑，vue 点击编辑按钮后 页面变成input输入框，Vue实现点击表格单元格出现输入框，失去焦点隐藏输入框功能，利用vue插
Vue+elementUI实现表格双击输入
l ﹉x `。的博客
07-16 1969
基本思路 使用v-if和v-else控制表格显示文本还是输入框 每个属性的edit为false为不可编辑，为true是可编辑 输入可以是input、select、date-picker等等 代码： 页面： <template> <div> <el-table :data="tableData" border style="font-size: 12px"
vue 框架element UI table表格数据双击编辑，失去节点确定
weixin_48305373的博客
07-28 1957
双击表格显示input输入框鼠标离开更改输入值。
vue中设置div里面的内容无法选中（双击div不会被选中）
a1783118的博客
10-27 2389
双击div不会被选中
element-plus table组件，实现双击可编辑单元格，失去焦点，提交数据，支持下拉选择框选择。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-22 5964
vue3+element-plus在使用table组件时，实现双击可编辑单元格，单元格使用input，失去焦点或者回车后，提交table数据。同时支持下拉选择框选择。
Element UI表格内容双击可编辑，失去焦点提交内容
weixin_43484014的博客
06-07 1732
需求就是双击列表中的某一cell，获取焦点时单元格变成input编辑框，失去焦点时如果内容有更改就触发修改的接口，如果内容无更改的话，就不触发。
vue拖动鼠标阻止文本被选
qq_30351747的博客
08-12 1048
vue拖动鼠标阻止文本被选 描述：pc端，拖动悬浮按钮，页面文本会随着悬浮按钮的拖动出现被选，虽然没什么影响，但是很影响用户体验。 如图：（图字是左侧，博主左右不分） 修复 onmousemove(e){ let et= e || window.event; et.preventDefault(); // 阻止默认事件发生 } copy上面两行代码就可以解决 ...
el-table 表格双击变成el-input框且聚焦，input框验证出错后聚焦
yh8899abc的博客
05-26 2468
效果图 before： after： 实现： HTML部分 <el-row :gutter="20" class="kong"> <el-table :data="prototypes" style="width: 100%;"> // 序号栏目 type="index" <el-table-column type="index" label="序号" width="100"></el-table-column>
如何屏蔽双击选中文本
不积跬步，无以至千里
08-29 3077
IE浏览器可以通过在某个标签里添加onselectstart="return false"来屏蔽双击选中文本，该属性在火狐中无效，火狐需要用style="-moz-user-select:none;"。此外还可以在body里添加该属性来实现整个网页都无法选中文字。 类似的属性属性还有： 禁止鼠标右键：oncontextmenu="return false"； 禁止拖放：ondrags
vue3为被选中时总价取消
最新发布
09-12
Vue 3 是一个流行的前端JavaScript框架，用于构建用户界面。在Vue中，实现被选中时总价取消的功能通常涉及到组件的双向数据绑定、事件处理和状态管理。这里是一个基本的实现思路： 1. 使用`v-model`指令在表单输入元素（如复选框）上创建双向数据绑定，这样可以轻松地追踪复选框的选中状态。 2. 监听复选框的`change`事件，以便在选中或取消选中时执行相应的逻辑。 3. 在事件处理函数中，根据复选框的状态更新总价，或者直接取消总价的显示。 这里是一个简单的例子来说明这个过程： ```html <template> <div> <!-- 复选框绑定到 selectedItems 模型 --> <input type="checkbox" v-model="selectedItems" @change="updateTotal"> <!-- 其他商品项 --> </div> <div v-if="totalPrice && selectedItems.length > 0"> 总价：{{ totalPrice }} </div> </template> <script> export default { data() { return { selectedItems: [], // 存储选中商品的数组 items: [/* 商品列表 */], // 商品数据 totalPrice: null // 总价初始化为null }; }, methods: { updateTotal() { // 计算选中商品的总价 this.totalPrice = this.selectedItems.reduce((sum, item) => { return sum + item.price; }, 0); // 如果没有商品被选中，则总价设置为0 if (this.selectedItems.length === 0) { this.totalPrice = 0; } } } }; </script> ``` 在这个例子中，当复选框的状态改变时，`updateTotal`方法会被调用，并更新`totalPrice`的值。如果没有任何商品被选中，则总价会被设置为0。
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值