When a user loads my page, the first element to become active in the browser is one of my menu buttons.
I have a search box (form field) on my page that I want to be the first thing active.
What I mean by "active" is that when the user pushes the tab button, it cycles through all the elements on the site, right. And if users use tab on my site they have to cycle through all the menu buttons before coming to the search field.
Is there a way to say to the browser, "make this field the first active one on page load"?
So that when the page has loaded, the user can start typing in the search field right away.
Thank you.
You can use autofocus for that. Using javascript you can do
document.onload = function() {
document.getElementById("textField").focus();
}
OR
you can directly use it as follows
Search : <input type="text" name="search" autofocus><br>
You can read more about it here and can try it out here.
It will be best option for case
<input type="text" name="YourSearch" id="YourSearch" autofocus>
Related
We are aware that the autofocus-attribute works only on Page Load & Reload Page.
Use-case:
I have 2-input fields in a form and the first input field has the autofocus-attribute and when the form initially loads the field has the focus [expected behavior].
Now, I click on the second input field and simply close this form.
I launch the form again (cached form comes up) - the focus persists on the second field - I want a workaround/solution where the focus remains in the first field even for a cached form in html.
A sample code
<input type="text" #myInput id="first" autofocus>
<input type="text" id="second" >
Is there a workaround for cached form to bring focus to the first input element every time?
I have tried the .focus() on the element under ngAfterViewInit() alongside have tried explicitly called the method right after the first input field (which would only work if there is only one input field in a form, because the focus doesn't move to the other field), (i.e.)
<input type=text" #myInput id="first> {{ myInput.focus() }}
The online HTML-form I want to fill out using MechanicalSoup has 2 submit buttons (so 1 form with 2 submit buttons). The first button (red in the picture "Toevoegen") is to upload a photo after choosing a file. The second button (not shown) submits the completed form. I have figured out how to address the different buttons using the form.choose_submit() function, so that's fine.
My question now is the following:
When I fill the form by hand, I noticed that after selecting the file and pressing the first (red) button, it takes some time (1-2 secs) for the file to upload. When I now fill out the form using mechanical soup, do I have to include this time (1-2 secs) for the photo to upload (for example using the time.sleep()) before I (make MechanicalSoup) fill out the rest of the form and submit it using the second submit button? Or will the form figure out that it has to upload the pic first and wait for that before executing the final submit order? So it's really a timing issue I have to coordinate the proper functioning of both buttons...
I hope this edit clarifies things a bit more.
Thanks for any suggestions!!
If it helps: this is what I found in the HTML form for the first submit button:
<div id="edit-submitted-file_add-ajax-wrapper">
<div class="form-item webform-component webform-component-file webform-component--file_add">
<label for="edit-submitted-file_add-upload">Add File</label>
<div class="form-managed-file">
<input type="file" id="edit-submitted-file_add-upload" name="files[submitted_file_add]" size="22" class="form-file" />
<input class="button form-submit" type="submit" id="edit-submitted-file_add-upload-button" name="submitted_file_add_upload_button" value="Toevoegen" />
<input type="hidden" name="submitted[file_add][fid]" value="0" />
</div>
</div>
</div>
When submitting a file, the file upload is part of the form submission. There's no point waiting before submitting, because this is not when the file upload happens. Unless the website is seriously broken, there's no point waiting after either, because the .sumbit() method call is blocking, i.e. it returns only after the form submission, hence the file upload, is completed.
However, it's hard to tell what you should do exactly in your case: it seems the first submission is done without reloading the page, hence using JavaScript. MechanicalSoup does not do JavaScript, so it may or may not work (in a perfect world, sites that work through JavaScript have a non-JavaScript fallback, but ...).
Probably the best for you is to try and see what works.
When I open my website I want to automatically start typing in my form instead of the default browser search bar.
from the scren:
I want to start typing in the Google bar for example.
scrn
There is an autofocus attribute in Html 5
<input type="text" autofocus>
From MDN:
This Boolean attribute lets you specify that a form control should
have input focus when the page loads, unless the user overrides it
(e.g. by typing in a different control). Only one form element in a
document can have the autofocus attribute, which is a Boolean. It
cannot be applied if the type attribute is set to hidden (that is, you
cannot automatically set focus to a hidden control). Note that the
focusing of the control may occur before the firing of the
DOMContentLoaded event.
because I am having some problems about when using onblur/onkeydown (for tabs) etcetera.
I 'd like to ask this question:
if I have a page with just one input text and I go there and I click the "tab" where is the focus going ? I'd like to know because I'd like to force the input text not to lose focus...
My page is like this:
<!docType>
<html>
<body>
<div><input type='text' /></div>
</body>
</html>
If you want to focus specifically that text field than use autofocus attribute
<input type="text" autofocus />
Or if you want to map the tabs in a custom way use tabindex attribute
Tab 2<br />
Tab 1<br />
Tab 3
When there is 1 input text field and there's nothing after that, not even a link than probably the focus will go to the address bar of the browser, or probably it will move to add on bar if the user is having any browser add on, on the add-on bar
In Chrome when you tab away from an input and there are no other elements with tab index on the page the focus changes to the browser's URL bar. There probably won't be anything you can do to prevent this happening.
When you tab again it will return to that element - again provided it's the only element on the page with a tab index.
When you then click back onto the page (not the input) the focus isn't naturally restored to the input field (again, testing in Chrome here), so you may need to use JavaScript to force the focus upon the element.
A basic HTML question. Is it possible on an HTML page to declaratively achieve a behavior when pressing Enter in a textbox moves the focus to the next control? How do you achieve it and how do you turn it off? Or maybe the dynamic javascript part should be involved here?
For exaple, the following HTML in IE7 does not allow to move to the focus to the next textbox with enter:
<html>
<body>
<form>
<table>
<tr><td>
<input type="text" name="i1"/>
<td></tr>
<tr><td>
<input type="text" name="i2"/>
<td></tr>
</table>
</form>
</body>
</html>
I have a page where I need to get rid of this 'move the focus to the next control when Enter is pressed' behavior.
#Edit: The example above turns out to be incorrect. The control the focus jumps to when I press enter on the page I want to avoid this behavior on is actually of type submit. The strange thing is that this "submit" is a part of a Telerik tree control and is not a submit button but an arrow used to collapse and expand the tree structure.
So I assume the focus jumps to the next submit control which the Browser expects to be a normal submit button which is not true in my case.
So I suppose I should look for a Telerik pecific solution here.
In most browsers, pressing Enter when focused within a form will submit the form. If you need to change this behavior so that pressing Enter moves to the next textbox you will need to use javascript.
Try this: (courtesy of javascript.internet.com)
http://javascript.internet.com/forms/tab-key-emulation.html
<input type="text" name="i1" Tabindex="[order number]"/>
I usually lookup these things on:
http://start.gotapi.com/