谷歌浏览器自动填充功能怎么用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谷歌浏览器自动填充功能怎么用相关的知识,希望对你有一定的参考价值。

参考技术A   方法如下:

  1、启动 Chrome 浏览器,然后点击右上角的扳手图标设置;

  2、在设置页面中选择个人资料;

  3、勾选自动填充中的启用自动填充功能后,只需点击一次即可填写多个网络表单复选框;

  4、点击管理自动填充设置,分别点击添加新地址和添加新信用卡,预设好这些数据信用卡;

  5、完成之后,点击确定。

谷歌浏览器自动填充删除背景图片

【中文标题】谷歌浏览器自动填充删除背景图片【英文标题】:Google Chrome autofill removing background image 【发布时间】:2014-02-19 13:28:05 【问题描述】:

当我在邮箱中邮件时,我没有问题并且完美显示。 但是当谷歌浏览器决定自动填充时,左边的图像被删除了。 http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg

我已经阅读了一些关于破解黄色背景的主题,这很有效,但图像继续消失。

input:-webkit-autofill 
    -webkit-box-shadow: 0 0 0 1000px white inset;

// html

<input type='email' class='email' placeholder='email'/>

// css

.email
    background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
    background-repeat: no-repeat;
    padding-left: 35px;

http://jsfiddle.net/9AM6X/> 示例,但没有显示错误,因为我无法在 jsfiddle 中复制 chrome 的自动填充。

【问题讨论】:

为什么不试试input:-webkit-autofill, .email \* existing .email styles *\ 这不是我的答案。仍然希望它可以帮助***.com/questions/2920306/… [1]:***.com/questions/2920306/… 你有没有设法找到答案? @blueprintChris 是的,人造元素是可能的。 【参考方案1】:

我找到了另一个解决方案,它应该使用 JavaScript 来解决问题。将 onchange 添加到您的输入元素,并使用以下功能。我将它与 CSS 规则 input:focus:invalid 和 input:required:valid 一起使用,以根据输入是否有效显示不同的背景图像。

适用于 Chrome 和 Firefox,但似乎不适用于 Safari :(

CSS:

input:required:valid 
    background: url("IMAGE_PATH_HERE") no-repeat right;
    background-size: 25px;
    border: 3px solid green;
  

input:focus:invalid 
    background: url("IMAGE_PATH_HERE") no-repeat right;
    background-size: 25px;
    border: 3px solid red;
  

HTML:

<input type="text" name="name" id="name" autocomplete="name" onchange="fixAuto(this)" required>

JavaScript:

    /**
    * Adds background image to input fields if they are removed by the browser.
    *
    * @param element An input HTML element.
    */
  function fixAuto(element) 
    setTimeout(() =>  
      // Store the current value of the input field
      let value = element.value;

      // Store the element itself
      let input = document.getElementById(element.id);

      // Change the input fields value
      input.value = value;
    , 0);
  

【讨论】:

【参考方案2】:

使用动画解决这个问题是最有用的方法!

感谢@wkille 的回答:https://***.com/a/51874418/11720087

你可以这样设置动画:

@keyframes clearAutofill 
  to  background: 'Your-code'; 
  /* e.g background: url('./img/example.png') 0 0 no-repeat #fff; */


input:-webkit-autofill 
  animation: clearAutofill forwards;
  /* 'animation-fill-mode: forwards' can keep the style you set. */

【讨论】:

【参考方案3】:

您只需将autocomplete="off" 添加到您的输入字段即可解决问题。我试过了,效果很好。

【讨论】:

【参考方案4】:

使用关键帧放回图像:

@-webkit-keyframes autofill 
    to 
        background-image:url(images/your-input-bg-image.svg);
    


input:-webkit-autofill 
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;

感谢@Steve 对Removing input background colour for Chrome autocomplete?的回答

【讨论】:

这对我不起作用! :(【参考方案5】:

为文本框使用背景图像是非常不方便的做法。您可以更改您的 HTML 标记

html

<div class='icon'></div>
<input type='email' class='email' placeholder='email'/>

css

.email 
    border:1px solid black;
    padding-left: 5px;
    float:left;
    border-left:none;
    outline:none ;
    margin-left:-3px


.icon 
    background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
    background-repeat: no-repeat;
    background-position:center center ;
    float:left;
    width:30px;
    height:18px;
    margin-top:2px;
    border:1px solid black;
    border-right:none

我已更新代码:jsFiddle

【讨论】:

【参考方案6】:

我在这里发布了一个解决方案,本质上是作为所描述问题的破解/解决方法。

使用额外的元素,我们可以将图标放在输入元素上。

预览w:http://output.jsbin.com/necigedago

工作示例:

CSS

.control 
    position: relative;


.email 
    padding-left: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;


.email ~ .input-icon 
    background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;

HTML

  <p class='control'>
    <input type='email' class='email' placeholder='email'/>
    <span class='input-icon'></span>
  </p>

【讨论】:

【参考方案7】:

我找到了更好的解决方案。

对于新的 Chrome 版本,您只需在密码字段中输入 autocomplete="new-password" 即可。我已经检查过了,工作正常。

【讨论】:

【参考方案8】:

唯一的选择是删除背景图像在 webkit 中的填充,但您可以这样设置样式:

/* CHROME ISSUE W/ YELLOW BG */
input:-webkit-autofill#username,
input:-webkit-autofill#usernameId_new,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
-webkit-text-fill-color: #646464 !important;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
-webkit-padding-start: 8px !important;

该图像仍然适用于 IE、FF 等...但对于 chrome 将覆盖。

最好的-

【讨论】:

以上是关于谷歌浏览器自动填充功能怎么用的主要内容,如果未能解决你的问题,请参考以下文章

网吧怎么用谷歌浏览器

谷歌自动填充问题???

怎么用谷歌搜索

如何禁止谷歌浏览器自动填充密码

用谷歌浏览器老是会出现此类型的文件可能会损坏您的计算机

推土机系统谷歌浏览器退出以后就不能填充自动填充密码账号