html

<div class="container">
<form class="parent" autocomplete="off">
<input type="text" class="search" placeholder="搜索" id="sousuo">
<!--<input type="button" name="" id="" class="btn">-->
</form>
</div>

css

* {
margin: ;
padding: ;
}
.parent {
position: relative;
float: right;
} .search {
height: 30px;
border-radius: 30px;
outline: none;
border: none;
border: 1px solid #ccc;
padding-left: 20px;
}

有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击 input文本输入框就会出现之前输入的文本,这样有时会觉得比较方便,但有时也会暴露用户的隐藏数据,那么如何让input表单输入框不记录输入过信息的方法呢?

方法一: 在不想使用缓存的input中添加 autocomplete="off"

例如

一:<input type="text"  autocomplete="off" />
二:<input type="text  autocomplete="on" />

方法二: 如果整个表单元素都不使用autocomplete功能的话,在 input 所在的form标签中添加 autocomplete="off"

例如

<form action="#" autocomplete="off">
<input type="text" name="test" />
</form>

清除input框的缓存的更多相关文章

  1. 清除input框对浏览器保存的用户名和密码自动填充问题

    清除input框对浏览器保存的用户名和密码自动填充问题: type类型写如下写法,聚焦的时候type类型为“password” <input ng-model="getpwd" ...

  2. html禁止清除input文本输入缓存

    多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录. 如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocompl ...

  3. autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示

    autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:aut ...

  4. 类似input框内最右边添加图标,有清空功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. 通过定时监听input框来实现onkeyup事件-

    问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...

  6. js清除单选框所选的值

    js清除单选框所选的值 $("input[type='radio']").removeAttr('checked');

  7. Chrome浏览器清除页面js文件缓存的方法

    Chrome浏览器清除页面js文件缓存 Chrome浏览器清除js缓存方法虽然简单,但有些人还是不太会,有些人会去设置里面清除有时候没有用,这里写一下简单步骤,使用一次以后就会了,而且速度更快 1.打 ...

  8. input框的限制(仅数字以及电话号码的限制)

    电话号码限制 <input  type="text"  id="phone" maxlength="11" onkeyup=" ...

  9. input框focus时的美化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Web站点如何防范XSS、CSRF、SQL注入攻击

    XSS跨站脚本攻击 XSS跨站脚本攻击指攻击者在网页中嵌入客户端脚本(例如JavaScript),当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的,比如获取用户的Cookie,导 ...

  2. 原生js实现星星闪烁的效果

    星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...

  3. 详解nodejs中使用socket的私聊和公聊的办法

    详解nodejs中使用socket的私聊和公聊的办法 nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express ...

  4. keras 自定义 custom 函数

    转自: https://kexue.fm/archives/4493/,感谢分享! Keras是一个搭积木式的深度学习框架,用它可以很方便且直观地搭建一些常见的深度学习模型.在tensorflow出来 ...

  5. Siebel 基础入门--权限控制

    企业应用最基本的要求就是只授予用户在他工作职责范围内的权限,一般而言,这种权限都包含两种,一种是对于相应的功能的可见性(或者形象地说,菜单的可见 性,这个是应用层面界面的,这种权限在Siebel里称为 ...

  6. docker 部署 nginx+php+mysql

    系统:centos7 使用root账户 开放80端口 firewall-cmd --zone=public --add-port=80/tcp --permanent 安装docker yum ins ...

  7. SSH免密钥互信及企业案例

    SSH远程免密码:  原理简述:客户端 创建公钥和私钥,公钥是锁,私钥是自己留在客户端的钥匙. 客户端将公钥(锁)发出到服务端,以后自己就能用客户端本地的私钥进行登陆,不用输入密码! 1.客户端,和服 ...

  8. May 18th 2017 Week 20th Thursday

    The greater the struggle, the more glorious the triumph. 挑战愈艰巨,胜利愈辉煌. Sometimes it would be better t ...

  9. bzoj3820 虫逢

    Description 小强和阿米巴是好朋友. 阿米巴告诉小强,变形虫(又叫阿米巴虫)和绝大多数生物一样,也是有 DNA 的.并且,变形虫可以通过分裂的方式进行无性繁殖. 我们把一个变形虫的基因组抽象 ...

  10. axios简单了解

    简单介绍 axios是基于客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...