How does a browser automatically fill in email and password fields?

When using a text input and a password input in my single page app, Chrome often prompts to remember the information for autofill. However, I am encountering an issue where it doesn't actually autofill the information.

Does anyone know how to troubleshoot this and get it to work properly?

My application is a single page app and all requests are made via AJAX.

Here are my simple input fields:

<input type="text" placeholder="email" autocomplete="on" />
<input type="password" placeholder="password" autocomplete="on" />

I have tried adding autocomplete="on" but it seems like it may not be working due to my lack of form usage. Since I only use Ajax requests, what would be the best way to ensure autofill works correctly?

javascriptajaxautocomplete

Answer №1

When using Chrome, it automatically fills in forms for you. To ensure this feature works properly, wrap your form fields in a <form> element without adding a submit input. This way, the form will not disrupt your autofill settings.

For more information on triggering Autofill in Google Chrome, check out this helpful answer: How to trigger Autofill in Google Chrome?

As mentioned in that response:

You can find all the regular expressions that Chrome uses to recognize common fields by referring to autofill_regex_constants.cc.utf8. Ensure that the names of your HTML fields match these expressions. Here are some examples:

  • First name: 
    "first.*name|initials|fname|first$"
  • Last name: 
    "last.*name|lname|surname|last$|secondname|family.*name"
  • Email: "e.?mail"
  • Address (line 1): 
    "address.*line|address1|addr1|street"
  • Zip code: 
    "zip|postal|post.*code|pcode|^1z$"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the possibilities of ReactJS and the sleek design of

How can I alter the background color of a RaisedButton without having the CSS class name appear in the autogenerated div? Here is the button: <RaisedButton className="access-login" label="Acceder" type="submit"/> This is the specified CSS: .acces ...

javascriptcssreactjsmaterial-ui

I'm interested in querying my mongodb collection data based on a particular field

I need help creating a list from my mongodb database that can be sorted by the "username" field. After learning about the limitations of namespaceing in mongodb, I'm trying to figure out how to sort my collection based on the "username" field. Here ...

javascriptreactjsmongodbmongoosenext.js

Undo a CSS transition when clicked

There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...

javascriptjqueryhtmlcss

How can I designate a default value for a variable within a prop in a Vue.Js component?

I have a question regarding setting a default value for a prop using a getter. props: { userID: { type: String, default: '' } } The default value I want to set is obtained through: computed: { ...mapGetters('Auth&a ...

javascriptvue.js

Emphasize the URL of the current page and navigate up one level

I have a list of links in my navigation. I want the current page's link to be highlighted, as well as the parent page's link one level up. For example: All pages: /blog, blog/careers, blog/authors Page: /blog/author Highlight: /blog/author, /blo ...

javascriptreactjs

Default value for the href property in NextJS Link is provided

Is there a default href value for Next/Link that can be used, similar to the way it is done in plain HTML like this: <a href='#' ></a> I attempted to do this with Link, but it resulted in the page reloading. Leaving it empty caused a ...

javascriptreactjsnext.jsnext-link

An effective way to prevent right-clicking on iframes across all websites

I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...

javascriptjqueryhtmlcssasp.net

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

javascriptjqueryhtmlcss

Python code to retrieve data from XHR response on a webpage

My goal is to extract specific data from a website called BarChart, specifically from this URL: . Usually, I can easily extract data using the xpath method on normal HTML pages. However, I've noticed that this website retrieves its data from a networ ...

pythonajaxweb-scrapingscrapyxmlhttprequest

Is it possible to use JavaScript to clear a field that was generated by Yii CRUD?

Issue with Yii's GRUD field generated and Firefox HTML: <?= $form->field($model, 'productId')->textInput(['maxlength' => true]) ?> Comparison of PHP generated code to Firefox HTML: <input id="taolistforcreate-p ...

javascriptphpjqueryyii

Tips for implementing both an onChange and onSubmit event for a MUI TextField

I'm currently working with React and MUI and have created a form like the following: const handleUserInput = (event) => { set_user_input(event) } const handleSubmitForm = () => { if (user_input == 'help'){ ...

javascripthtmlreactjsformsmaterial-ui

Apply CSS styles when the text exceeds the size of the textbox

Is there a way to create a textbox that scrolls on hover only if the text is longer than the textbox itself? Check out my attempt here: https://jsfiddle.net/SynapticError/wqh4ts3n/35/ The text should scroll on hover if it's longer than the textbox. ...

javascriptcss

What is the best way to utilize the useSWR hook when there are necessary logical operations to be performed on the response before proceeding with the next API call

I am currently utilizing the swr library in a Create React App and require the usage of the useSWR hook for data fetching that is both contingent and conditional. The specific task at hand involves: Making an API call to retrieve an id which will be used ...

javascriptreactjsreact-hooksswr

employ varying XSL stylesheets to display an XML document in a separate window

My issue involves an XML file being transformed by a specific XSL file (XSLT 1.0), which in turn includes multiple other XSL files with various templates. The challenge is to add a button to the rendered XML that, when clicked, opens the same XML in a ...

javascriptxmlxsltparameter-passing

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

javascriptcssinternet-explorerconditional-comments

What is the method to retrieve the image's value after dropping it onto the droppable area?

I have implemented a drag and drop feature using jQuery, and I am trying to extract the value of an image and insert it into a database. Additionally, I want to update and remove the image value when it is removed from the droppable area. How can I achie ...

javascriptjquery

What is the best way to execute this query using CodeIgniter?

This is the controller method public function ajaxLoad() { $data['query'] = $this->db->query("SELECT * FROM items ORDER BY id DESC"); $data['content'] = $this->load->view('item', $data, true); $data = ...

phpajaxcodeigniter

Can AJAX implementation result in an increase in bounce rate on my website and negatively impact my search engine rankings?

As I work on developing an art gallery website that continuously updates images using AJAX for users with enabled Javascript, rather than loading multiple pages, I am concerned about the potential high bounce rate this may create. Although search engines ...

ajaxseo

The Vue.js component is only refreshing after I manually refresh the browser page

As a newcomer to Vue.js and other reactive frameworks, I am still learning the ropes. I have a component that needs to update whenever there is a change. The goal is to display a balance from a specific login. <li :key="balance">Balance {{ balance ...

javascriptvue.jsasync-await

The value is not getting set after calling React Hook UseState

I am currently working on a React component that handles payment processing. There is a part of my code where I utilize the useEffect hook alongside useState to set certain values. Check out the code snippet below: React.useEffect(()=>{ axiosFetch ...

javascriptreactjsreact-hooks