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. c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持

    一.数据展示 1.View代码: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynam ...

  2. 【EF数据库链接报错】“The underlying provider failed on open”

    EF在操作数据库时要反复链接.断开数据库,如果连接字符串是windows 服务验证,而不是用的用户名和密码,那么尝试访问数据库的用户是NT AUTHORITY\NETWORK SERVICE.权限不够 ...

  3. php中各种http报错的状态码分析

    HTTP会经常遇见错误,本文主要和大家分享php中各种http报错的状态码,希望能帮助到大家. HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无 ...

  4. [转] Akka 使用系列之二: 测试

    [From] http://www.algorithmdog.com/akka-test 通过上一篇文章,我们已经大致了解怎么使用 Akka,期待细致用法.这篇文章将介绍如何用 Akka-testki ...

  5. Eclipse打开时“发现了以元素'd:skin'”开头的无效内容。此处不应含有子元素的解决方法

    把有问题的 devices.xml 文件删除,再在sdk 里面 tools\lib 下找到devices.xml 文件,将这个文件拷贝到你删除的那个文件夹里,重启 eclipse 就 OK 啦!

  6. （转）Asp.Net Mvc视图引擎Razor介绍

    Asp.Net Mvc视图引擎Razor介绍 1.Razor介绍 程序园原创,转载请注明:http://www.kwstu.com/ArticleView/dabaomvc_2014082408205 ...

  7. 再学C/C++ 之 指针常量 和 常量指针

    (1)指针常量,将指针的指向当成常量.即指针变量的值只能在定义的时候初始化,定义后不能修改,也就是说不能改变指针变量的指向.但是不影响所指对象的访问特征.其定义形式为: 类型 * const 指针 / ...

  8. io流之转换流InputStreamReader、OutputStreamWriter

    例子程序: package io; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.File ...

  9. SpringBoot集成WebSocket【基于STOMP协议】进行点对点[一对一]和广播[一对多]实时推送

    原文详细地址,有点对点,还有广播的推送:https://blog.csdn.net/ouyzc/article/details/79884688 下面是自己处理的一些小bug 参考原文demo,结合工 ...

  10. 警告: Hessian/Burlap: 'com.github.pagehelper.Page' is an unknown class in WebappClassLoader

    项目中使用mybatis的分页插件pagehelper出现下面的警告 出现上面的警告,并不影响程序的运行.但是毕竟看着比较闹心. 使用debug进行代码根据发现,执行的过程中使用到了pagehelpe ...