I didn't find the answer yet.
I've checked my code in the chrome element inspector and my input tags got an attribute fdprocessedid that I didn't write and I don't understand what is doing and its function. Can someone explain? Thanks!
<input type="number" fdprocessedid="esjjvm" /> (the value chages in each input with random letters)
We had this same issue. It turned out to be the McAfee WebAdvisor Chrome extension that was adding "fdprocessedid" to every button, etc. Try disabling your extensions or launching the page in Incognito mode, and see if it's still there.
Related
How can i disable chrome suggesting a random password on an type="number" input? i personally think it doesn't makes sense that chrome does that on an input with type="number", I'm using React and Next.js but I'm not sure if that's relevant
"Add suggested password"
Chrome sometimes determines an input is a password field, regardless of the type.
Normally you would add autocomplete="off" on the input element. See documentation here.
However, there is currently a bug in chrome where this doesn't work. See bug here.
So there may not be a solution until they fix the bug. If your number field happens to be below another input that is a user/email field, maybe that is why it thinks it is a password field. If that is the case, you could try to put the number field in a different <form> tag.
Setting the input name property solved the issue for me.
According to this answer on Stack Overflow, we can set the accept attribute of an <input type="file" /> to filter accepted input, as follows:
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
However, as you can notice running the simple snippet below, Chrome 43.0.something appears to simply disregard this configuration, while it is perfectly understood by Firefox 39.0.
I considered switching to a more blunt approach, using:
accept=".xls, .xlsx"
... which works fine in Chrome but makes Firefox somewhat confused, accepting only the files using the .xlsx extension.
Considering that this is probably very common and basic, I must be missing something: where am I screwing up? How do I get a html5 file input to suggest only .xls and .xlsx files consistently across browsers?
Here's a code snippet illustrating my issue (along with a JSFiddle link in case you'd wanna fiddle with it).
Accepts application/vnd.ms-excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>
Transfer them both mime-type and extension
<input type="file" name="file2" accept="text/csv, .csv"/>
DISCLAIMER: This is not an answer by any means, but merely a note to the potential other readers trying to use this attribute in a wrong way.
On this non-official W3C reference of the accept attribute, you can find the following:
Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.
It´s not recommended to use this attribute for validation, because the users could somehow work around it and not all browsers behave the same.
First: have you definitely got an html5 doctype?
<!DOCTYPE html>
Cause if you haven't, it might not work in some places.
Second: instead of using html you could use javascript or jquery. See this question / answer: jquery - Check for file extension before uploading
Third: In my experience, some html5 stuff just doesn't work sometimes. I've no clue why but it becomes necessary to get around problems by using jquery, for example.
You should always do a server side validation anyway to make sure that what the user is uploading is in fact what you have limited it to.
Remove space in
accept=".xls, .xlsx"
to
accept=".xls,.xlsx"
Works in Chrome 69 and Firefox 61. Haven't tested it on Safari, IE and Edge yet.
I've got a new site we're working that uses HTML5. Everything validates except for the LESS stylesheets and the Facebook tags. However, Chrome will not autofill properly. If I type 'chr' in the first name field, I get the standard Autofill drop down beneath it, but highlighting, clicking, or otherwise selecting the autofill option does not complete the form as it should. The autofill dropdown merely goes away.
I'm guessing there's something in my HTML that is confusing the autofill code, but I can't seem to find any information on the web about Chrome's autofill implementation and things to look for when it doesn't work.
Edit: I know Autofill is working properly because it works on other sites, even other sites we've developed. It's got to be something specific to the HTML on this site.
Chrome will not save password or autocomplete data if a form is submitted asynchronously. For example, if you submit the following form, Chrome will prompt you to save the password:
<form action="/signin">
<input type="text" name="email" />
<input type="password" name="password" />
<button type="submit">Sign In</button>
</form>
However, if you bind to the submit event and override the default behavior, there will be no prompt and the autocomplete data won't be saved:
$(function(){
$('form').submit(function(e){
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize());
});
});
Tested in 20.0
It seems that Chrome only enables the autofill for forms with a POST method. This may have been a security update on a recent version.
Autofill will work if you do:
<form id="myForm" action="?go" method="post">
It won't work if you omit the method or it's set to get:
<form id="myForm" action="?go" method="get">
<form id="myForm" action="?go">
The only way I know of in HTML to block it is setting: autocomplete="off" on the inputs.
I know drop downs don't work sometimes with autofill, but not text boxes.
I have just fighted with this issue for a while, I found out that a "name" attribute with
a dash like "email-2" would cause Chrome not to autocomplete the field.
In my case I have changed it to email2 and now it works.
It only affects the "name" attribute, while the "id" attribute does not make any difference.
I hope this help someone to save time with such a silly bug.
Greetings from Argentina!
Sorry I can't give you a definitive answer, but I would start with removing everything from the page except that input field. If it works then I would start "binary search" - remove half of the original layout and see if it works, if it isn't - remove another half of what's left and so on, until problem line is found.
Same could be applied to css, js, etc. It is a pretty effective way of searching for errors (for 1024 lines of code you will find exact problem line in just 10 steps).
Only Those elements which require autofill should be there inside the form.otherwise the autofill wont work.Bring only those textboxes under a form.if u already have form involving other elements,separate them and put new form tag around the textboxes which require autofill and nothing else inside it.
I have problem with <input type="file" /> in Chrome - it does not show the textbox near the 'browse' button. What is a best way to show a standard file input (textbox+button) in Chrome?
This is the default behavior of Google chrome as well as Safari. Read this blog for a solution
The box is there, although it is not designed.
It might be on the "wrong" side of the window, but it's there.
Just for the matter - put a border around it - and you'll see it's there.
<input type="file" style="border: solid 1px red">
Also, after you select a file - you get the name of it.
<input type="file"/> has different visual appearance depending on the browser. On some browsers it is a text field with a button in others its just a button. Since the element isn't very styleable there isn't much you can do about it.
If you really want a file upload to look/behave different from the default implementation flash is the way to go.
For example many sites use sfwUpload. For full styleing freedom, you can make it invisible and place it on top of a html button via positioning.
Another way to work with the file upload inputs are to make them invisible via visibility: hidden, position them on top of other elements and thus forgo the use of flash, but the implementations are rarely very nice, so i wouldn't recommend it.
The file input element is styled differently depending on your browser (and probably OS - I've only ever used Windows). If you look at the same page with a file input element in FF, IE and Chrome, it will appear differently in each browser.
Why do you need to display the textbox anyway? In FF and IE you can't type directly into it anyway, so the only usage would be to display the filepath of the selected file; which Chrome already does for you, just not in a box.
I found a link from someone else who was having this problem, solution here.
It doesn't specifically mention chrome, but safari does the same thing apparently. (The link was an accepted answer posted in a chrome discussion)
edit: wow, second time this morning that I've been out googled by another member! at least questions are getting answered!
You could override the default behaviour and swap the control appearence alltogether. Found this today researching how to edit the css on fileupload.
Most of the times type file got display:none style. In that case use !important to display the input field.
<input id="cv_file" type="file" name="cv" style="display:block !important;"/>
Sometimes it is just caused by a javascript code similar to this one:
function someOnClickHandler(e)
{
e.preventDefault(); // it kills the file dialog
}
// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler);
I'm reloading a web page that has the following code:
<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />
Even though the HTML stays sent to the browser is the same for each reload of the page, the checkbox always takes on the checked value when a reload was performed. In other words, if the user checks the checkbox and reloads, the checkbox is still checked.
Is there some caching going on here?
Edit: I tried Gordon Bell's solution below and find that this is still happening even after removing the value="1". Anything else I might be missing?
<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" />
Add autocomplete="off" into the form element on the page. The downside is that this isn't valid XHTML, but it fixes the issue without any convoluted javascript.
Yes, I believe it is caching. I see this behaviour on Firefox for example (not Safari, for what that's worth :) ).
you can reload the page and bypass the cache (on Firefox) using CTRL-SHIFT-R and you'll see the check value doesn't carry (a normal CTRL-R will grab the info from the cache however)
edit: I was able to disable this server side on Firefox, setting a cache control header:
Cache-Control: no-store
this seems to disable the "remember form values" feature of Firefox
set autocomplete="off" with js is also working well.
for example using jquery:
$(":checkbox").attr("autocomplete", "off");
This is an old question but still an active issue for firefox. None of the responses i tried solved it, but what did solve it for me was simply this:
document.getElementById('formId').reset();
This simply resets the form to the default options every time the page loads. Not ideal since you lose granular control, but its the only thing that solved this for me.
It is a nice feature of Firefox: if you type something but reload the page, the text remains in the text area. Idem for other settings you have chosen.
Alas, it doesn't work in SO (probably reset by JS) and dumber browsers like IE...
Which suggest a solution: if you really need to do that, reset the form with JS. form.reset() might do the job (acts like the Reset input button).
or instead of f5 press enter on address bar :)
It could be due to a browser caching - very useful for static web sites that are not changed too often, very bad for dynamic web applications.
Try with those two meta tags in the head section of the page. Second meta tag is for older browsers (IE5) that are not recognizing "no-cache" meta tag and although different produces the same result: Each request goes to the server.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
$("#showimage").prop("checked",false);
the public idea to solve that
make form & reset button
<form>
<checkbox>
<reset>
</form>
$(reset).trigger("click");//to clear the cache and input
$(checkbox).trigger("click");//to mark checkbox