Programmatically get suggested values of autofill - javascript

Is there a way to get access to values suggested in an input with autocomplete='on' without manually clicking on it ?
<input autocomplete name='email' />
I tried, with the help of javascript, to click/focus/faked a KeyboardEvent but nothing seems to work.
And even if I succeed to show the list of the different values, which I can't, is it possible to collect them after that ?
Thanks !
first question on stackoverflow, have some mercy please

The autocomplete area is a part of browser not the webpage. You cannot access its items. The only way is to create your own autocomplete module with JS and turn off the autocomplete attribute of input.

Related

auto complete off is not working on edge browser

I am trying to submit the form but It won't. It is auto-fill the input area after submitting once. However, after auto-fill the input it does not enable the submit button.
As it works on the rest of the browsers.
I have tried to add autocomplete off attribute in form tag as well as input tag but no luck.
<form autocomplete="off" ....````
This works, but not the way that you think it does.
Officially it should be: autocomplete="off".
However many browsers bizarrely ignore this. Therefore it's best to just put some random string on the autocomplete section like:
autocomplete="autocomplete_off_randString"
Note that make sure the autocomplete value for each input is different (use JavaScript). Hence the random string at the end. Or else you may get suggestions from fields with the same autocomplete value.
in edge worked for me autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" / according to this https://stackoverflow.com/a/30344707/14913109
try to use autocomplete="new-password"as describe here

How do I stop browsers for suggesting inputs for fields?

I have an input text field, when user enters any alphabet/word, I have to suggest relevant topics.
The problem here is, the browser is also doing the same thing. It is showing previously entered data, which overrides the information shown in the site.
PFB the image, the circled black d, is a suggestion by browser (firefox in this case) and below list, (Git-Commands, Equals Method etc) is shown by me.
I want browsers to stop showing suggestions for this particular field.
How to do that?
The site is build in simple HTML and JavaScript.
Reference The searchbox on homepage on : mohitkanwar.com
PS: I have tried using autocomplete="off" . It does not work here, as it is not autocomplete, it is suggesting.
<input autocomplete="off">
Should do it. It will NOT work on login-fields, however, as most Browser vendors decided to ignore the setting there. Further Information:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Use the autocomplete attribute, see http://www.w3schools.com/tags/att_input_autocomplete.asp for details.

Address Auto complete using Google Maps API

I am currently using google maps api to suggest addresses as user types into an input field. When they select one of the drop down suggestions provided by google, the state/province gets automatically updated.
I was wondering if there was a way to update the state/province without selecting the suggestions google provides? Maybe a user neglects to select a provided option, how do you then automatically update the state/province
example - https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
Since the data is stored in google's database,I don't think you can update automatically if you don't click on an element of the list, because if you don't click, the google object is not created.
You can still try to convert the value of your input text into a google object but i don't think it's possible (if it is not a google.maps.places.Autocomplete object you can't use getPlace() ).
I tried it already because i was facing the same problem and din't find a solution either, maybe you will manage to convert the input into a google.maps.places.Autocomplete object. It's the only way if you want to use the data of google.

AngularUI-Bootstrap Typeahead: Search hint inside the textbox

We are trying to implement autocomplete using AngularUI-Bootstrap Typeahead feature. An additional feature is to have autocomplete with a hint inside the textbox itself. Like a Google search, when one starts typing the search text, the autocomplete results are shown below the textbox, but also the textbox shows the hint.
I tried implementing this using a variable inside placeholder property, but didn't work. What exactly is this behavior called and are there any pointers I can refer to- to achieve this? Tried Googling around but in vain, couldn't get any useful resource to proceed. Any suggestions are appreciated.
Well placeholder will not work as it's visible only when input is empty, what you need is a layer under the input that will display the same value as it is done for google autocomplete
If you open dev tools you will see there are 2 inputs, one over another

Read only textfield editable via inserted javascript?

I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).
NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.

Categories

Resources