zoukankan      html  css  js  c++  java
  • 有关表单autocomplete = "off" 失效问题解决方案

    一、autocomplete介绍

    autocomplete是Html5中的新属性。
    该属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入的时候,浏览器基于之前输入过的值,应该显示出在字段中填写的选项。
    该属性适用于<form>,以及下面的<input>类型。text,search,telephone,email,password,datepickers,range以及color.
    该属性有两个值,on和off。
    on是默认的,规定启用自动完成功能。
    off是规定禁用自动完成功能。

    二、有关autocomplete = "off"失效

    做项目的时候,有这个固然方便。但是当我们做用户的找回密码这样的时候,或者重置密码的时候,有这个就显得不是那么好了。
    当input的type为text的时候,autocomplete是乖乖的听话的。但是当是paddword的时候,发现并没有起作用。还是会提示密码。这时候上网查了查方法,自己也试了。接下来总结一下。

    1.先设置属性readonly,然后在点击那个元素的时候,再把readonly设置为false。我使用的是这种方法解决的。

    html代码

    <input type="password" readonly="true" class="pwd" autocomplete="off">

    js代码(假设引入了jquery)

    $(".pwd").on("click", function () {
        $(this).attr("readonly", false)
    })
    

    2.先设置其type为text,单点击的时候,再把其type改为password

    html代码

    <input type="text" readonly="true" class="pwd" autocomplete="off">

    js代码(假设引入了jquery)

    $(".pwd").on("click", function () {
        $(this).attr("type", "text")
    })
    

    3.可以先写好一个type为text的input框,写一个type为password的input框。但是这个时候这个密码框是隐藏的。当点击文本框的时候。让文本框消失,密码框显示。其实思路和上面是一样的。

    4.看网上还有一种说法,是把autocomplete的值写为'new-complete'。网易登陆邮箱就是这样写的。但是这个方式我实验了以后,是不可以的。你们可以试试哦~

  • 相关阅读:
    创建类以及引用一个类
    修改hosts文件
    微信第三方登录接口开发
    Android定位
    Leetcode 102. Binary Tree Level Order Traversal
    Leetcode 725. Split Linked List in Parts
    Leetcode 445. Add Two Numbers II
    Leetcode 328. Odd Even Linked List
    Leetcode 237. Delete Node in a Linked List
    Leetcode 234. Palindrome Linked List
  • 原文地址:https://www.cnblogs.com/10manongit/p/12775190.html
Copyright © 2011-2022 走看看