1：背景

　　公司基于业务需求开发了一套纯JS的时间控件，本来用得好好得。后来发现在部分浏览器下使用该时间控件会出现输入框自动填充的部分与控件的展示产生了冲突；

　　如图：

2：问题分析

　　因为部分浏览太人性化，需要记录用户在页面中其他输入框中输入过的文字；方便用户重用自己输入过的文字。太人性化就会可能导致与自定义的控件产生展示冲突的问题；

3：解决方案

　　在输入框中带上 autocomplete="off" 属性就能完美解决冲突的问题了；既然浏览器的人性化设置让我们的界面十分不人性化，那我们就要禁止浏览器默认的人性化设置；

web杂记-禁止输入框自动填充文字的更多相关文章

  1. input输入框自动填充的问题

    火狐浏览器打开页面,input可以自动填充历史输入值,现在想无论input类型是type='text'还是'password'都禁止自动填充,因为我写的页面在input='text'时先检查是否有输入 ...

  2. input输入框自动填充黄色背景解决方案

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  3. 如何禁止浏览器自动填充非登陆input的账号和密码？

    发现浏览器填充密码的方式,那就是,找到页面上第一个type为password的input填充.发现了这个规律后,很自然的就想到了,是不是可以在真正的password前面加一个隐藏的password,形 ...

  4. chrome浏览器自动填充失效问题

    现在浏览器带有自动填充,一般在input标签中增加autocomplete="off" 可以进行控制,off代表不填充,on代表填充,这个属性也可以放在form标签中,对所有的in ...

  5. 解决浏览器自动填充input

    浏览器输入框自动填充解决办法 emmmmm:今天处理公司后台系统遇到的:登录页面浏览器保存账号密码后:浏览器会自动在其他页面进行填充:解决如下图: 浏览器会默认填充input type值为passwo ...

  6. 消除浏览器对input输入框的自动填充

    Mozilla官方文档建议的是 直接使用 autocomplete = ‘off’ 即可禁止输入框从浏览器cache获取数据,博主以前使用这个也就足够兼容浏览器了. 现在发现,却在chrome.fir ...

  7. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  8. jquery自动填充输入框

    1,这是一个比较简单的页面,你可以复制下来就可以使用.<!doctype html><html lang="en"><head> <met ...

  9. html页面禁止自动填充浏览器记住的密码

    现在的浏览器功能越来越强大,比如Chrome浏览器,在一个系统login的时候我们一般会记住密码,那么在整个系统中,浏览器一旦遇到 type="password"的控件,就会把密码 ...

随机推荐

  1. React Native vs. Cordova.

    简评:跨平台开发五彩斑斓,本文作者简单介绍 RN 和 Cordova 的两种不同终端跨平台流程,从与原生开发联系中分析其利弊. 什么是原生(Native)? 原生是一个相对概念.其实软件开发最后意义指 ...

  2. Python小实验——读&写Excel文件内容

    安装xlrd模块和xlwt模块 读取Excel文件了内容需要额外的模块-- \(xlrd\),在官网上可以找到下载:https://pypi.python.org/pypi/xlrd#download ...

  3. python学习，day3：函数式编程，递归和高阶函数

    # coding=utf-8 # Author: RyAn Bi def calc(n): #递归 print(n) if int(n/2) > 0: #设置条件,否则会循环999 次,报错, ...

  4. 遇见Navicat 2003-can't connect to MYSQL server on 'localhost'（10061）

    学习过程中难免遇到问题,今天就遇到了Navicat 2003-can't connect to MYSQL server on 'localhost'(10061),navicat报错,我就纳闷以前都 ...

  5. Android之build.prop属性详解

    注:本篇文章是基于MSD648项目(AndroidTV)的prop进行说明. Android版本:4.4.4 内核版本:3.10.86 1.生成build.prop build.prop的生成是由ma ...

  6. Ubuntu 安装ftp

    Ubuntu 用vsftpd 配置FTP服务器 网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Se ...

  7. Web App、Hybrid App、 Native App

    1.特点: 1. 偏交互的Native,偏浏览的Web:交互指复杂操作,输入/选择什么的2. 已稳定的Native,试错中的Web:H5页面用来做低成本验证很好3. 访问硬件Native,信息展示We ...

  8. 2 小时学会 Spring Boot

    一. 什么是 Spring Boot Takes an opinionated view of building production-ready Spring applications. Sprin ...

  9. javaweb 实现跨域

    现在的一个web应用会涉及到多个地方的restAPi的调用,传统的jsonp虽然支持跨域,但是只是支持get请求. 传统的ajax请求是不支持跨域的,是为了安全考虑. 跨域的思路是跟http机制有关, ...

  10. 深入理解java集合框架之---------HashMap集合

    深入理解HaspMap死循环问题 由于在公司项目中偶尔会遇到HashMap死循环造成CPU100%,重启后问题消失,隔一段时间又会反复出现.今天在这里来仔细剖析下多线程情况下HashMap所带来的问题 ...