移动浏览器，使用VUE时， input 输入的文字不断消失，绑定 composition事件可解决。

最新推荐文章于 2023-07-05 15:03:41 发布
最新推荐文章于 2023-07-05 15:03:41 发布
阅读量3.2k 收藏 4
点赞数 2
分类专栏： Vue.js笔记 文章标签： VUE composition 移动浏览器 input 文字消失
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trenki/article/details/101283887
版权

当时发生问题时vue的版本是2.5.17，发现input框没有绑定composition事件，后来将vue升级到2.6.10就解决了。主要是查看一下input框有没有绑定compositionend和compositionstart事件
示例图

CompositionEvent

CompositionEvent触发的时候就是在文本合成系统，换句话说就是在使用输入法输入中文的时候会触发它的三个事件（compositionstart、compositionupdate、compositionend）。
上边三个事件从名字就很好区分，compositionstart是输入开始时，compositionupdate输入过程中不断更新，compositionend输入结束。
可以仔细看下图中的event log
示意图
附上MDN链接mdn compositionstart_event事件讲解

trenki
关注
专栏目录
Vue3 - 详细实现点击文字或按钮后 “变成输入框“ 进行文本编辑，同时能保存修改和取消编辑状态功能，文本旁边有笔图标点击后文字变成 input 框可对文字编辑修改，最新解决方案（详细示例代码教程）
王佳斌
07-04 1787
vue3，nuxt3，点击变成输入框，点击编辑按钮让文本变为input方便修改，点击元素变输入框，可编辑input输入框，点击文字内容后变成＜input＞输入框同时能修改和取消、删除，输入框input点击右侧编辑图标后变为可编辑状态，当失去焦点后自动保存，vue文字点击变为输入框能修改，内容变成input可以修改，vue3点击按钮后旁边的文字变为可编辑，组件插件，教程，使文本变成可编辑的效果，点击取消复原，失去焦点还原，取消后恢复成原来的样子，如何实现点笔icon图标将html变成文本输入域能修改和移除，点
input回退消失 vue_vue中input的onblur事件动态添加语句，input内容消失了？
weixin_39732027的博客
12-20 607
我有两个input框，需要根据里面的输入的值，为input下面的span添加提示语句。但是添加后input框中内容消失我把给span动态赋值的语句删除之后，input内容不会消失相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)模板中的代码：<div><inputtype="text"placeholder="真实姓名"ref="name"v-on:blur="chang...
输入框默认显示内容，当输入文字时，显示内容消失
qq_36236621的博客
05-29 2515
placeholder="手机" 输入框默认显示内容，当输入文字时，显示内容消失
搜索框输入文字时提示内容消失
iTaylorfan的博客
02-18 2131
最简单的方法，<input>placeholder属性 placeholder 属性是 HTML5 中的新属性。 <form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <i...
vue项目中点击Button按钮 页面会自动刷新 input框值消失
小月月
08-11 1513
问题复现 ：输入手机号,点击Button 按钮 ，input 框中的值会消失，后来发现是页面自动刷新了。 如图： 如图： 这是我的代码 灰色的注释掉的是我一开始的写法 红色长条框内 蓝色框内是后来修改好的写好 总结： 我是在form表单中使用的button标签，有时候就会刷新页面； 想要这个button不刷新页面， 就把form中的button改为 就行 ...
iview的input输入框输入一个字符就失去焦点
weixin_39031037的博客
09-03 394
报错的场景在遍历数据的时候 报错写法：key的值不能使用name input数据绑定后进行模型更新后，div的属性要刷新，进行渲染后就重新刷新的input. 不要用item.name这种做key值即可 正确的写法 ...
vue3-clipboard:for Vue 3的剪贴板.js绑定
04-28
Vue 3的绑定。 该存储库是Inndy用于Vue3的插件的端口。 安装 npm install --save @soerenmartius/vue3-clipboard 用法 全局导入v-clipboard指令 src/main.ts import { createApp } from 'vue' import App from '...
关于vue3默认把所有onSomething当作v-on事件绑定的思考
10-15
Vue3 框架在设计上进行了一些重大改进，其中包括将所有以 `on` 开头的属性默认处理为 `v-on` 事件绑定。这一改变的目的是为了保持向后兼容性和简化组件接口。在 Vue2 中，我们通常使用 `v-on` 指令来监听并处理组件...
Vue 3.0双向绑定原理的实现方法
10-16
在实际开发中，理解Vue.js的双向绑定原理不仅有助于更加高效地利用框架提供的功能，还可以帮助开发者在遇到问题时能够迅速定位和解决。通过上述介绍的原理和代码实现，相信开发者可以对Vue.js的双向绑定有了更深层次...
vue3-form-usage：使用vue3的表单用法
02-07
4. **表单事件处理**: Vue3仍然支持`.sync`修饰符，但更推荐使用`v-model`配合`ref`进行双向数据绑定。对于自定义表单组件，可以使用`v-model`的局部实现，即`model`选项： ```javascript export default { props...
vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件
m0_53718249的博客
11-03 1447
vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件
input文本框中添加提示文字，输入后自动消失
听说你很会玩的博客
04-06 1925
<input placeholder="提示文字"/> 效果： 如果小博的文章对你有所帮助，欢迎点赞留言关注！！！????????????
双向绑定补充 （v-model）分析
buyiny123的博客
09-10 262
v-mode最后实际上是在当前实例（el） 上添加 addAttr(el, ‘value’, (${value})) 相当于（el.prop） addHandler(el, event, code, null, true) （el. event） 实际v-mode相当于读法糖 最后生成代码描述： "_c('div',[_c('input',{directives:[{name:"model",rawName:"v-model",value:(message),expression:"message"}],
vue构建的html项目在safari和iOS微信下点击input失效
玉约科技的技术分享
11-25 300
小约今天遇到了一个问题：vue构建的html项目在safari和iOS微信下点击input失效！ 经过一番排查是因为小约在项目里加入了这段代码： *{ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select:none; } 可以将 -webkit-user-select:none; 改为-webkit-user-select:auto
Vuex刷新后数据消失解决方法
高山景行，一尘不染
04-01 5410
先看vuex的的用法： store.js import Vue from 'vue' import Vuex from 'vuex' import { createVuexAlong } from 'vuex-along' Vue.use(Vuex) export default new Vuex.Store({ state: { name: "小强", commit...
输入框input事件compositionstart和compositionend的妙用
EmotionComputer
07-05 1425
input提供了compositionstart和compositionend两个事件，以上解决思路其实来源于vue源码v-model的指令实现的时候对输入框事件做了的处理。由此看出鱿大大，在写vue框架的时候是多么细心，这些细节都考虑到了。这样带来的一个问题就是在输入中文的过程中输入框可能会抖动，这样就完全解决了中文输入的时候输入框问题。
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
jattxgt的博客
11-22 4545
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
vue 点击显示，点击消失
xiaoxin6661111的博客
08-08 700
vue 点击显示，点击消失
vue 3 input 防抖
最新发布
09-13
这样，每当用户输入时，输入框绑定的 `@input` 事件会触发防抖函数 `debouncedSearch`，而不是直接触发 `search` 函数。只有当用户停止输入一段时间（这里是300毫秒）后，`debouncedSearch` 函数才会执行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值