I am trying to build a simple login form in a chrome extension. In my popup.html, I have a few input fields that have their corresponding tabindex values set. The username field has the autofocus property set through HTML or $('#myelement').focus() (I've tried both methods).
For some reason, tabbing does not work on my form when I first click the button next to the omnibar to open the popup. The username field has focus, but pressing the tab key makes the cursor disappear. It only shows up again if I explicitly click one of the input fields and then tab over, but never when they popup first opens.
<input type="text" id="one" tabindex=1 autofocus />
<input type="text" id="two" tabindex=2 />
If I open popup.html in a web browser (and not the extension), I've noticed that the tabbing in my form works perfectly.
This is a regression, which has a bug filed here. Unfortunately it has been around for quite some time now, and there doesn't seem any progress on it.
There is no known scriptable workaround for this bug.
Related
I recently added a location search field on my site which shows suggestions based on what you type, but on Microsoft edge, a menu pops up on clicking on the input field. How can I disable this menu from appearing on just this input field of my site?
Based on the image you provided, I think this should be caused by some default settings in Edge. If you want to turn off this prompt, just navigate to: edge://settings/personalinfo in Edge and disable this feature like this image below:
I had today the same problem. I had input field without label and empty placeholder. Setting placeholder"..." and making the placeholder transparent makes that edge does not anymore offer "type / ..."
Hth
I believe what you're looking for is:
spellcheck="false" autocomplete="off" aria-autocomplete="none"
The aria-autocomplete seems to prevent that box from popping up and the spellcheck seems to also stop the spell checker one from displaying.
There are places where autocomplete and spellcheck would come in handy, but NOT in single-line fields like email, website, or an <input> where I have my own Bootstrap dropdown-menu/dropdown-item list that displays retrieved DB records via AJAX as the user types (in this case, the Edge popups were ovelaying my DropDown list).
Anyway, adding this code to the <input class="whatever" id="whatever" spellcheck="false" autocomplete="off" aria-autocomplete="none" placeholder="whatever" value="whatever" > seems to solve the issue and you don't have to get all your users to change the browser attributes or mess with the placeholder. Hope this helps... :)
I am trying to get the validation to work correctly in Firefox. It works fine in Chrome and Safari. In the simplest example in pure HTML, everything looks ok until I click the submit button a second time without leaving the input data.
<form onsubmit="javascript:return false;">
<input type="text" name="name" pattern=".{5,20}" required />
<button type="submit">Submit</button>
</form>
How to reproduce this (in Firefox):
Please click the submit button, and see that the validation shows up correctly. Please then click anywhere on the page (body or input, but not the button), and then click the submit button again to see the validation still shows correctly.
If you click the button again once the validation is showing it stopps working and never back until the page is refreshed.
I am looking for some workaround for this situation so that I am not leaving the user with the inability to submit the form without giving error message.
I tried calling reportValidity() but it also stops working at this point.
The properties input.validity and input.validationMessage have the correct values, but the error does not show.
I would appreciate any hints. Thanks.
I have a problem with chrome, when I login in to my app and move between pages chrome fill some input type='text' with usernames saved in chrome automatically. I think it's for new version of chrome, How to prevent of it? Is there a html attribute that prevent of it?
Turning Off Autofill in Chrome
Click the Chrome menu icon. (Three dots at top right of screen.)
Click on Settings.
In the "Autofill" section, expand the area for which you wish to disable Autofill.
Toggle the setting OFF if it is on. The system will automatically save your settings.
Clearing Autofill Data in Chrome
Click the Chrome menu icon. (Three dots at top right of screen.)
Click on History, then click on History again in the menu that appears.
Select Clear browsing data.
At the top, choose “the beginning of time” option to clear all saved data.
Make sure that the “Clear saved Autofill form data” option is checked.
Click Clear browsing data.
Try to use autocomplete attribute
autocomplete="off"
Example : <input type="text" name="username" autocomplete="off">
I'm using firefox 26. I have saved my credentials to my development site. And then i have used auto complete off feature. Following is my sample code
<form id="loginform" autocomplete="off">
<input name="username" type="text" autocomplete="off">
<input name="pwd" type="password" autocomplete="off">
</form>
Its worked fine for previous versions. After update to firefox 26, its not working. when i type first letter of my username, its showing saved credentials in suggestion. How to disable this?
Even i selected the suggested credentials, its auto fill the username and password field. But its not allowing to access site, showing login errors like enter password.
From: http://support.mozilla.org/en-US/kb/control-firefox-automatically-fills-in-forms#w_prevent-firefox-from-storing-form-entries
If you don't want Firefox to remember what you've entered into form fields, you can turn off the auto form fill feature:
On the menu bar, click on the Firefox menu and select Preferences...
.
Select the Privacy panel.
Set Firefox will: to Use custom settings for history.
Remove the check mark from the box that says Remember search and form history.
Close the Preferences window .
Disabling form history also prevents Firefox from storing search history for the Search bar in the Navigation Toolbar.
Clearing form history
If you want Firefox to forget all of your previous form entries:
On the menu bar, click on the History menu, and select Clear Recent History….
In the Time Range to clear: drop-down, select Everything.
Click the arrow next to Details to display the list of items that can be cleared.
Make sure only Form & Search History is check marked.
Click Clear Now. The dialog box will disappear and your form history will be erased.
Prevent Firefox from storing form entries
In some browsers you may need to activate an autocomplete function for this to work, or deactivate by unchecking its relative checkbox. (Look under "Preferences" in the browser's menu. This feature is in the control of user. At least in the current time.
I use this to detect enter:
<input type="submit" name=hiddenbutton value=enter style="display: none">
When this is placed before all other form elements, then I get the appropriate $_REQUEST[hiddenbutton]when enter was used to submit the form.
Except with Chrome and other Webkit-based browsers, which don't activate the first button when enter is pressed.
Is there a way to make it work on all browsers? (preferably with as little JavaScript as possible)
I would recomend adding a focus listener to make sure the user is not justdoing something completely different like typing in a word document, because some browsers will detect key clicks without focus