uni-app输入框输入时在下方显示之前输入过的内容,点击后可直接填充
时间: 2024-12-04 12:23:37 浏览: 40
在uni-app中,为了实现在输入框下方实时显示用户之前输入过的内容,并允许用户点击后直接填充,你可以创建一个滚动列表或者下拉选择器来进行这样的功能。通常的做法是在失去焦点(blur)事件中将输入框的内容存入本地存储(如`localStorage`),然后在获得焦点(focus)事件时,读取并显示这个值。
以下是基本的步骤:
1. **存储历史**:
```javascript
inputEle.addEventListener('input', function(e) {
localStorage.setItem('previousValue', e.target.value);
});
inputEle.addEventListener('blur', function() {
// 防止重复写入,如果输入没变则不存储
const currentVal = e.target.value;
if (currentVal !== localStorage.getItem('previousValue')) {
localStorage.setItem('previousValue', currentVal);
}
});
```
2. **显示历史**:
```javascript
inputEle.addEventListener('focus', function() {
const initialValue = localStorage.getItem('previousValue');
if (initialValue) {
inputEle.value = initialValue; // 显示初始值
}
});
```
这样,每次用户离开输入框并且输入内容改变时,就会自动更新本地存储。再次聚焦输入框时,就会看到之前的输入。
阅读全文