uni-app 使用平台input组件时 @input事件会在输入时自动添加逗号 小程序中可直接复现
uni-app 使用平台input组件时 @input事件会在输入时自动添加逗号 小程序中可直接复现
示例代码：
<input class="store-input" [@input](/user/input)="search" v-model="inputValue" placeholder="请输入" />function searchRobot() {
const { value } = e.detail;
if (value) {
const searchResult = props.robotListData?.["-1"].filter(
(item) =>
+item.mac !== -1 &&
(item.mac?.includes(value) ||
item.nickName?.includes(value))
);
robotList.macList = searchResult || [];
} else {
robotList.macList = props.robotListData?.[-1] || [];
}
}操作步骤：
- 键盘输入
预期结果：
- 不要带逗号
实际结果：
- 带了逗号
bug描述：
使用 input做输入查询时，给 @input定义了输入事件，但是在键盘输入时，会自动在输入后带上英文逗号
| 项目信息 | 详情 |
|------------------|----------------|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | windows10(21H1) |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.4.12 |
| 第三方开发者工具版本号 | 微信开发者工具1.05.2204250 |
| 基础库版本号 | 2.23.5 |
| 项目创建方式 | HBuilderX |
5 回复
在 uni-app 中使用平台 input 组件时，如果 @input 事件在输入时自动添加逗号，可能是因为你在 @input 事件处理函数中对输入值进行了处理，导致输入框内容被修改。
问题分析
通常情况下，@input 事件会在用户输入时触发，并返回当前的输入值。如果你在 @input 事件处理函数中对输入值进行了处理（例如：添加逗号），那么输入框的内容会被更新为你处理后的值，从而导致输入框内容自动添加逗号。
示例代码
以下是一个可能导致问题的示例代码：
<template>
<view>
<input type="text" :value="inputValue" @input="handleInput" />
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput(event) {
// 这里对输入值进行了处理，添加了逗号
this.inputValue = event.detail.value + ',';
}
}
};
</script>解决方法
如果你不希望输入框内容自动添加逗号，可以检查 @input 事件处理函数中是否对输入值进行了不必要的处理。如果你确实需要在输入时处理输入值，可以考虑使用 @blur 事件或其他事件来触发处理逻辑，而不是在 @input 事件中实时处理。
例如：
<template>
<view>
<input type="text" :value="inputValue" @input="handleInput" @blur="handleBlur" />
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput(event) {
// 仅在输入时更新输入框的值，不进行额外处理
this.inputValue = event.detail.value;
},
handleBlur(event) {
// 在失去焦点时处理输入值，例如添加逗号
this.inputValue = event.detail.value + ',';
}
}
};
</script>