uni-app 微信小程序输入框BUG

开发环境	版本号	项目创建方式
Windows	21H1-19043.1586	HBuilderX

示例代码：

<template>  
    <view class="wrap">  
        <view class="top"><u-search @custom="searchList" @search="searchList" placeholder="请输入搜索条件" v-model="keyword"></u-search></view>  
        <loading-list top="80rpx" bottom="100rpx" ref="list" url="/stock" class="member-list">  
            <view slot="list" slot-scope="{ list }">  
                <view v-for="(item, index) in list" :key="index" class="member-item">  
                    <view class="member-left">  
                        <view class="avatar-box"  :style="{'background-color':getRandomColor( item )}">  
                            {{ item.Name[0] }}  
                        </view>  
                    </view>  
                    <view class="member-info">  
                        <view>{{ item.Name }}</view>  
                        <view>{{ item.Price }}/{{ item.Specs }}</view>  
                        <view>库存: {{ item.Quantity }}</view>  
                    </view>  
                    <view class="ico"><u-icon name="arrow-right" color="#909399" size="20"></u-icon></view>  
                </view>  
            </view>  
        </loading-list>  
    </view>  
</template>  

<script>  
import LoadingList from '@/components/page-lists/loading-list.vue';  

export default {  
    data() {  
        return {  
            listData: [],  
            listQuery: {},  
            keyword: ''  
        };  
    },  
    components: {  
        LoadingList  
    },  
    computed: {  

    },  
    methods: {  
        searchList() {  
            this.listQuery = {  
                Name: this.keyword  
            };  
            this.$refs.list.loadList(this.listQuery, true);  
        },  
        getRandomColor(item) {  
            console.log(item)  
                    const rgb = []  
                    for (let i = 0; i < 3; ++i) {  
                        let color = Math.floor(Math.random() * 256).toString(16)  
                        color = color.length == 1 ? '0' + color : color  
                        rgb.push(color)  
                    }  
                    return '#' + rgb.join('')  
                }  
    }  
};  
</script>  

<style lang="scss" scoped>  
@import './index.scss';  
</style>

更多关于uni-app 微信小程序输入框BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 1楼

各位大哥 - -，给看看啊

更多关于uni-app 微信小程序输入框BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 2楼作者

只有小程序这样?

eggper 3楼

H5没问题，其他平台暂时没有测试

songsunli 4楼

在使用 uni-app 开发微信小程序时，可能会遇到一些与输入框（<input> 或 <textarea>）相关的 BUG 或问题。以下是一些常见的 BUG 及其可能的解决方案：

1. 输入框聚焦时页面被顶起

问题描述：当输入框获得焦点时，页面会被顶起，导致布局错乱。
原因：微信小程序的默认行为是当输入框聚焦时，会自动将页面滚动到输入框可见的位置。
解决方案：
- 在 pages.json 中配置当前页面的 "disableScroll": true，禁用页面滚动。
- 使用 scroll-view 包裹页面内容，并设置 scroll-y 为 true。
- 在输入框的 focus 事件中，手动调整页面滚动位置。

2. 输入框内容无法双向绑定

问题描述：使用 v-model 绑定的输入框内容无法实时更新。
原因：可能是由于微信小程序的 input 事件触发机制与 Vue 的双向绑定机制不完全兼容。

解决方案：

使用 @input 事件手动更新数据：

<input :value="inputValue" @input="handleInput" />

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(e) {
      this.inputValue = e.detail.value;
    }
  }
};

3. 输入框 placeholder 不显示

问题描述：设置了 placeholder，但在小程序中不显示。
原因：可能是样式冲突或 placeholder 的样式未正确设置。
解决方案：
- 检查是否设置了 placeholder-style 或 placeholder-class，确保样式正确。
- 使用全局样式覆盖：
```
input::placeholder, textarea::placeholder {
  color: #999;
}
```

4. 输入框键盘遮挡问题

问题描述：输入框被键盘遮挡，用户无法看到输入内容。
原因：键盘弹出时，页面未自动调整到合适位置。
解决方案：
- 使用 adjust-position 属性（默认值为 true），让页面自动调整：
```
<input adjust-position="true" />
```
- 如果 adjust-position 无效，可以监听键盘高度变化，手动调整页面布局：
```
uni.onKeyboardHeightChange(res => {
  this.keyboardHeight = res.height;
});
```

5. 输入框无法输入中文

问题描述：在输入框中无法输入中文，只能输入英文或数字。
原因：可能是由于 type 属性设置不正确或输入框的某些限制。
解决方案：
- 确保 type 属性设置为 text：
```
<input type="text" />
```
- 检查是否有其他限制（如正则表达式或输入过滤）。

6. 输入框失焦后内容被清空

问题描述：输入框失去焦点后，内容被清空。
原因：可能是由于数据绑定问题或页面重新渲染导致。
解决方案：
- 确保数据绑定正确，避免在失焦时清空数据。
- 检查是否有其他逻辑（如 blur 事件）导致内容被清空。

7. 输入框在 iOS 上显示异常

问题描述：在 iOS 设备上，输入框的样式或行为异常。
原因：可能是由于 iOS 系统的默认样式或行为差异。
解决方案：
- 使用 -webkit-appearance: none; 清除 iOS 默认样式。
- 针对 iOS 设备进行特殊处理，例如监听 focus 和 blur 事件。

8. 输入框在真机上无法输入

问题描述：在开发工具中正常，但在真机上无法输入。
原因：可能是由于真机环境与开发工具环境的差异。
解决方案：
- 检查是否有其他逻辑（如事件绑定或数据更新）导致输入框无法输入。
- 确保输入框的 disabled 属性未设置为 true。

9. 输入框与键盘的交互问题

问题描述：输入框与键盘的交互不流畅，例如键盘弹出延迟或输入框位置跳动。
原因：可能是由于页面布局复杂或性能问题。
解决方案：
- 简化页面布局，减少不必要的嵌套。
- 使用 scroll-view 包裹内容，并设置 scroll-y 为 true。

10. 输入框的 `confirm-type` 无效

问题描述：设置了 confirm-type，但键盘的确认按钮未生效。
原因：可能是由于 confirm-type 的值设置不正确。
解决方案：
- 确保 confirm-type 的值正确，例如 "done"、"send"、"search" 等：
```
<input confirm-type="done" />
```