精华内容
下载资源
问答
  • Chrome浏览器下form表单,点击input输入框选择输入记录自动填充时,输入框背景颜色会改变,这是chrome浏览器内置的表单自动填充背景颜色,查看元素后找到相关css样式如下:input:-internal-autofill-previewed,input...

    Chrome浏览器下form表单,点击input输入框选择输入记录自动填充时,输入框背景颜色会改变,这是chrome浏览器内置的表单自动填充背景颜色,查看元素后找到相关css样式如下:

    input:-internal-autofill-previewed,

    input:-internal-autofill-selected,

    textarea:-internal-autofill-previewed,

    textarea:-internal-autofill-selected,

    select:-internal-autofill-previewed,

    select:-internal-autofill-selected {

    background-color: rgb(232, 240, 254) !important;

    background-image: none !important;

    color: rgb(0, 0, 0) !important;

    }

    但是就算修改相应的样式,也不能改变自动填充的背景颜色,但是可以通过box-shadow内阴影覆盖颜色。

    解决方法:

    方法一:

    input {

    box-shadow:inset 0px 60px 0px #fff;

    }

    代码中的60是input的高度。

    提醒:据说box-shadow存在性能问题,不建议多用。

    方法二:

    关闭输入框的自动填充,会导致用户体验不怎么好

    所有输入框:

    单个输入框

    展开全文
  • 本文要实现的效果是在文本框中输入个别字母或者汉字的时候,可以从数据中模糊查询将符合条件的数据查询出来,使得文本框在使用过程中更加人性化,大大的为用户提供方便。 通过AutoComplete控件可以实现这一功能。 ...

    前言

    本文要实现的效果是在文本框中输入个别字母或者汉字的时候,可以从数据中模糊查询将符合条件的数据查询出来,使得文本框在使用过程中更加人性化,大大的为用户提供方便。
    通过AutoComplete控件可以实现这一功能。


    实现效果如下图所示:下面案例可供参考
    在这里插入图片描述

    1. 引入js文件和css文件
    <script src="jquery.autocomplete/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.autocomplete/browser.js" type="text/javascript" charset="utf-8"></script>
    <link href="jquery.autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    
    1. 定义数组,里边存放要查询的数据
    var info = [
    
    		         { name: "张三", sex:"男", phone: "15633334444" },
    
    		         { name: "李四", sex:"男", phone: "13344445555" },
    
    		         { name: "小美", sex:"女", phone: "16833335555" },
    
    		         { name: "冰冰", sex:"女", phone: "13700002222" },
    
    		         { name: "迪丽热巴", sex:"女", phone: "13088883333" },
    
    		         { name: "苏三", sex:"女", phone: "15588880000" },
    
    		         { name: "建国", sex:"男", phone: "15244442222" },
    
    		         { name: "小花", sex:"女", phone: "18900002222" },
    
    		         { name: "菲尔", sex:"男", phone: "16688883333" },
    
    		         { name: "大卫", sex:"男", phone: "14488889900" }
    			];
    
    1. 使用autocomplete控件实现查询
    $("#name").autocomplete(info, {
    			
                    max: 10,//列表里的条目数
    
    				minChars: 0,//自动完成激活之前填入的最小字符
    				
    				width: 200,//提示的宽度,溢出隐藏
    				
    				scrollHeight: 300,//提示的高度,溢出显示滚动条
    				
    				matchContains: true,//包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
    				
    				mustMatch:false,
    				
    				autoFill:true,//自动填充
                       
    				formatItem: function(row, i, max) {
    			
    					 return row.name;
    
                    },
    
                    formatMatch: function(row, i, max) {
    
                         return row.name ;
    
                    },
    
                    formatResult: function(row) {
    
                         return row.to;
    
                    }
    
             	}).result(function(event, row, formatted){  //关联出其他信息
    
    				if(row == undefined || row.name == undefined ) {
    
    				} else {
    				
    					$("#sex").val(row.sex);
    					
    					$("#phone").val(row.phone);
    				}
    			});
    
    1. 页面input文本框
    form action="" method="get" autocomplete="on">
    
    	<div>
    
            <h2>个人信息:</h2>
    
            <span style="color:red;margin:3px;">姓名:</span><input type="text" id="name" />
    
    		<span style="color:blue;margin:3px;">姓别:</span><input type='text'  name="sex"  id='sex' value='' class='form-control' />
    
    		<span style="color:blue;margin:3px;">联系电话:</span><input type='text'  name="phone"  id='phone' value='' class='form-control' />
                            
        </div>
    
    </form>
    

    写在最后
    完整代码下载:文本框的自动填充和关联填充

    展开全文
  • 1.在开发登陆页面时无论是否记住密码网页都会自动填充登陆过的用户名密码进入因为有一个password的存在。 2.解决思路是文本框还是用text,只是里面的内容用●代替,将密码放入他的一个属性中。 3.在文本框输入时去...

    1.在开发登陆页面时无论是否记住密码网页都会自动填充登陆过的用户名密码进入因为有一个password的存在。
    2.解决思路是文本框还是用text,只是里面的内容用●代替,将密码放入他的一个属性中。
    3.在文本框输入时去更新属性。

    <input id="txt_2" maxlength="20" placeholder="密码" onfocus="Clearpwd();" password=""  class="form-control" />
    //监听录入事件
        function UpdatePwd() {
            document.getElementById("txt_2").addEventListener('input', function () {
                var _this = this;
                var newPassword = _this.value;
                var oldPassword = window.decodeURIComponent(window.atob(_this.getAttribute("password")));//解密
                var deta = newPassword.length - oldPassword.length;
    
                var truePassword = "";
                var p = _this.selectionEnd;//光标结束时的位置
    
                for (var i = 0; i < newPassword.length; i++) {
                    var c = newPassword.charAt(i);
                    if (i < p && c != '●') {
                        truePassword += c;
                    } else if (i < p && c == '●') {
                        truePassword += oldPassword.charAt(i);
                    } else {
                        truePassword += oldPassword.substr(oldPassword.length - newPassword.length + p, newPassword.length - p);
                        break;
                    }
                }
                newPassword = truePassword.replace(/\S/g, '●');
                _this.setAttribute('password', window.btoa(window.encodeURIComponent(truePassword)));//加密
                _this.value = newPassword;
                // 解决在win8中光标总是到input框的最后
                _this.selectionEnd = p;
                _this.selectionStart = p;
            }, false);
        }
        //获取光标事件
        function Clearpwd() {
            $("#txt_2").val("");
        }
    
    function SaveData() {
            var name = $("#txt_1").val();
            var pwd = window.decodeURIComponent(window.atob($("#txt_2").attr("password")));//密码属性;
            var zz = /["'<>%;)(&+]/;
            if (zz.test(name) || name == "" || zz.test(pwd) || $("#txt_2").val() == "") {
                Alert2("不能录入特殊字符且不能为空!");
                return false;
            }
            $.post("/Backstage/SaveUser", { name: name, pwd: pwd, oldid: $("#hi_rid").val() }, function (data) {
                Alert2(data);
                CloseChy2("div_addProduct");
                GetContent("");
            });
        }
    
    
    
    
    展开全文
  • 在修改ET系统登录页面时,发现使用谷歌的Chrome浏览器访问登录页面的表单,文本框背景色自动填充为黄色。怎么修改样式,都起效果,百度了一下,才发现是Chrome浏览器自动填充的原因! 上图是Chrome浏览器...

    在修改ET系统登录页面时,发现使用谷歌的Chrome浏览器访问登录页面的表单,文本框背景色自动填充为黄色。怎么修改样式,都不起效果,百度了一下,才发现是Chrome浏览器自动填充的原因!




    上图是Chrome浏览器自动填充为黄色的样式。这是由于Chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

    input:-webkit-autofill {

    background-color: #FAFFBD;

    background-image: none;

    color: #000;

    }

    如果要去除这个样式,可以对这个样式重新赋值。

    为input设置如下样式:

    input:-webkit-autofill,
    {
    -webkit-box-shadow0 0 0 1000px white inset //使用足够大的纯色内阴影覆盖黄色背景
    }

    点评和总结:该方法通过样式,来达到去除input表单私有属性的目的。

    展开全文
  • 见IE-工具-内容-自动完成选项。如:在下面两个文本框双击,会出现你上次输入的内容。<form>请双击文本框 <input type="text" name="wd"> <input type="text" name="email"></form> 2:有...
  • 删除特定已保存文本 当您在某个表单字段中键入信息时,可能会出现一个包含您曾经在该字段键入的文本的菜单。要删除特定的已保存文本,请使用键盘上的箭头键在菜单中选择该文本,然后按 Shift+Delete。...
  • 当填写某些信息的时候,想要日期自动就帮我们选上了当前日期。或手动选择代码如下Insert title here课程名称:学生姓名:成绩:// 时间控件日期:window.onload = function(){//创建一个当bai前日期对象var now = ...
  • Android文本框自动填充短信验证码,下载后可以直接运行.
  • 见IE-工具-内容-自动完成选项 请双击文本框 2、有时候我们并需要AutoComplete,例如需要用户自己再次输入而非自动完成。只要将所在表单元素的autocomplete属性设置为off即可。 请双击文本框  3、那么,如果所有...
  • 见IE-工具-内容-自动完成选项。 <form>请双击文本框<inputtype="text"name="wd"><inputtype="text"name="email"></form> 2、有时候我们并需要AutoComplete,例如需要用户...
  • <p>Hi I wanted to place search box like just dial site when we type the company name it will automatically fill the city name in the another text box " onfocus="javascript:this.value='';...
  • Sample 1:普通情况,即默认情况,AutoComplete时打开的。见:IE5-工具-内容-自动完成选项。...Sample 2:有时候我们并需要AutoComplete,例如需要用户自己再次输入而非自动完成。只要将所在表单元素的aut...
  • C#如何实现文本框自动填充?文本框的以下几个属性需要设置 AutoCompleteCustomSource:在此输入字符串集合。 AutoCompleteMode:如果为None则不会自动填充,需要设置为其他的。 AutoCompleteSource:Custom...
  • 主要介绍了jQuery 控制文本框自动缩小字体填充的相关资料,需要的朋友可以参考下
  • 前端文本框自动填充

    2016-11-23 15:08:00
    说明:可以在文本框双击或者输入后,自动跑去数据库调取数据形成下拉列表,可以说是自动填充 前提插件: <link href="../../Jequery/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> <...
  • input文本框自动填充背景色黄色解决方式 如何取消黄背景色?浏览器兼容处理? 本文目录: input文本框自动填充背景色黄色解决方式 解决前后,截图对比: 解决方式 兼容性说明 解决前后...
  • 文本框的关联填充.zip

    2021-04-25 17:04:56
    通过AutoComplete控件实现在文本框中输入个别字母或者汉字的时候,可以从数据中模糊查询将符合条件的数据查询出来,并对其他信息关联更新
  • 今天在写一个登陆界面的时候发现,浏览保存登陆账户密码时,Input文本框自动填充黄色背景色,影响美观,如下图所示 下面是解决方案,亲测有效: 在input标签里加上 autocomplete=“off” &amp;amp;lt;input ...
  • chrome下input文本框自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;} 转载于:...
  • autocomplete="off
  • 禁止浏览器文本框自动填充"Filler" text is used when a design must be shown to an audience and body copy remains unwritten. Text shown in the audience's native language will inevitably be discussed; ...
  • 本示例解决的问题: 1、不会在浏览器弹框提示保存密码 2、用户名和密码框不自动填充已保存的信息 3、单击用户名框时下拉选择历史输入过的信息
  • Word 宏处理文本框无颜色填充 在对word文档批量修改时,我们可以采用宏来进行处理。下面根据插入文本框批量进行无颜色填充设置。 第一步:首先录制宏 点击“宏”下面的倒立三角,再点击录制宏 在弹出“录制宏”窗口...
  • Chrome表单文本框自动填充黄色背景色样式 <p class="b1"><input type="text" name="user_name" autocomplete="off" placeholder="用户名" /></p> <p class="b2"><input type=...
  • 试了几个,最后这个成功解决了问题 input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,850
精华内容 6,740
关键字:

文本框不自动填充