elementui 输入框里面禁止浏览器自动填充用户名密码
时间: 2023-09-03 11:05:31 浏览: 75
可以在elementui的输入框中添加 `autocomplete="off"` 属性来禁止浏览器自动填充用户名密码。例如:
```html
<el-input type="text" placeholder="用户名" autocomplete="off"></el-input>
<el-input type="password" placeholder="密码" autocomplete="off"></el-input>
```
如果还是不能禁止浏览器自动填充,可以使用一些hack方法,例如在输入框上加上一个隐藏的输入框,让浏览器自动填充到隐藏的输入框中,然后再将隐藏的输入框清空。或者使用一些其他的js库来实现禁止自动填充的功能。
相关问题
密码输入框怎么禁止自动填充密码记录
可以在密码输入框的HTML代码中添加 `autocomplete="new-password"` 属性,这样就可以防止浏览器自动填充密码记录。例如:
```html
<input type="password" name="password" autocomplete="new-password">
```
如果想要同时禁止自动填充用户名,可以使用 `autocomplete="off"` 属性。但需要注意的是,这个属性会禁止所有自动填充功能,包括表单数据和地址等,因此需要谨慎使用。
elementui 输入框输入自动搜索
要实现elementui输入框输入自动搜索,你可以使用elementui中的el-autocomplete组件。该组件提供了自动完成的功能,它可以根据用户在输入框中输入的值从服务器获取数据并显示在下拉列表中。
以下是实现elementui输入框输入自动搜索的步骤:
1. 在页面中引入elementui库和axios库。
```html
<!-- 引入elementui库 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```
2. 使用el-autocomplete组件创建一个输入框和下拉列表。
```html
<el-autocomplete
v-model="inputValue"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
:trigger-on-focus="false"
></el-autocomplete>
```
在上面的代码中,我们使用v-model绑定输入框的值。fetch-suggestions属性指定了当用户输入内容时从服务器获取数据的方法。placeholder属性设置了输入框的占位符。trigger-on-focus属性指定了当输入框获得焦点时是否自动触发搜索。
3. 在Vue实例中定义querySearchAsync方法,并在该方法中使用axios从服务器获取数据。
```javascript
new Vue({
el: '#app',
data: {
inputValue: '',
options: []
},
methods: {
querySearchAsync(queryString, cb) {
axios.get('https://api.example.com/search', {
params: {
q: queryString
}
}).then(response => {
this.options = response.data.results;
cb(this.options);
}).catch(error => {
console.log(error);
});
}
}
});
```
在上面的代码中,我们定义了querySearchAsync方法,并在该方法中使用axios从服务器获取数据。该方法接收两个参数:queryString和cb。queryString是用户在输入框中输入的值,我们将其作为参数传递给服务器。cb是一个回调函数,我们将从服务器获取的数据传递给该函数,以便将数据显示在下拉列表中。
4. 最后,你需要在页面中创建一个Vue实例,并将步骤2和步骤3中的代码添加到Vue实例中。
```html
<div id="app">
<el-autocomplete
v-model="inputValue"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
:trigger-on-focus="false"
></el-autocomplete>
</div>
<script>
new Vue({
el: '#app',
data: {
inputValue: '',
options: []
},
methods: {
querySearchAsync(queryString, cb) {
axios.get('https://api.example.com/search', {
params: {
q: queryString
}
}).then(response => {
this.options = response.data.results;
cb(this.options);
}).catch(error => {
console.log(error);
});
}
}
});
</script>
```
现在,当用户在输入框中输入内容时,el-autocomplete组件会自动搜索并显示下拉列表。当用户从下拉列表中选择一个选项时,该选项的值会自动填充到输入框中。