input autocomplete用法

当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击 input文本输入框就会出现之前输入的文本,这样有时会觉得比较方便,但有时也会暴露用户的隐藏数据,那么如何让input表单输入框不记录输入过信息的方法呢?
方法一: 在不想使用缓存的input中添加 autocomplete="off"
例如
名字:<input type="text" name="FirstName" value="" autocomplete="off" /><br />
姓氏:<input type="text" name="LastName" value="" autocomplete="on" /><br />
方法二: 如果整个表单元素都不使用autocomplete功能的话,在 input 所在的form标签中添加 autocomplete="off"
例如
<form action="#" autocomplete="off">
<input type="text" name="test" />
</form>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在uni-app中,可以使用 `uni-input` 组件结合 `uni-popup` 组件来实现自动补全的功能。具体步骤如下: 1. 安装 `luch-request` 插件,用于发送请求获取数据。 ``` npm install luch-request --save ``` 2. 在需要使用自动补全的页面中引入 `uni-input` 和 `uni-popup` 组件。 ```html <template> <view> <uni-input v-model="searchText" @focus="showPopup = true" placeholder="请输入搜索关键字"></uni-input> <uni-popup v-model="showPopup" :position="position" style="width: 90%;max-height: 200rpx;"> <view v-if="searchText && searchList.length"> <view v-for="(item, index) in searchList" :key="index" class="popup-item" @tap="selectItem(item)"> {{item.name}} </view> </view> <view v-else class="popup-item"> 暂无数据 </view> </uni-popup> </view> </template> ``` 3. 在 `script` 中定义相关变量和方法。 ```javascript import request from '@/common/request.js' export default { data() { return { searchText: '', // 搜索文本 showPopup: false, // 是否显示下拉框 position: 'bottom', // 显示位置(可选值:top、bottom、center) searchList: [] // 搜索结果列表 } }, methods: { // 发送请求获取搜索结果 async getSearchList() { const res = await request.get('/search', {keywords: this.searchText}) if (res.code === 200) { this.searchList = res.data } else { uni.showToast({ title: res.msg, icon: 'none' }) } }, // 选中某一项 selectItem(item) { this.searchText = item.name this.showPopup = false } }, watch: { // 监听搜索文本变化 searchText(newVal) { if (newVal) { this.getSearchList() } else { this.searchList = [] } } } } ``` 说明: - 在 `uni-input` 组件中使用了 `@focus` 事件,当输入框获取焦点时,显示下拉框。 - 在 `uni-popup` 组件中使用了 `v-model` 实现双向绑定,控制下拉框的显示和隐藏。 - 在下拉框中使用了 `v-for` 渲染搜索结果列表,使用 `@tap` 监听选中某一项的事件。 - 在 `watch` 中监听搜索文本变化,当文本不为空时发送请求获取搜索结果,为空时清空搜索结果列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhangzhiping35

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值