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.
Related
I'm working on an HTML form for a web app. I'm adding the enterkeyhint attribute to indicate and navigate to the next input until the last one submits the form.
The problem is that enterkeyhint doesn't navigate to the next input if its type is type=text.
This happens on Chrome/83.0.4103.101 for Android 7. In Safari the hints button appears but they all do nothing.
Example:
<form (submit)="submitForm()">
<div>
<label>Name</label>
<input type="text" enterkeyhint="next" inputmode="text" />
</div>
<div>
<label>Email</label>
<input type="email" inputmode="email" enterkeyhint="next" />
</div>
<div>
<label>Comments</label>
<input type="text" />
</div>
</form>
Focusing on Name input, the Next button doesn't do anything.
Focusing on Email input, it navigates to any next input (Comments)
Now, if I change the type=email for type=text it doesn't navigate to the next input.
Similar behavior happens for type=tel. It does navigate to the next input of the form.
Am I missing something to make this work?
Thanks
enterkeyhint is just a hint to the browser what to display on the virtual keyboard, but you need to implement the actual behaviour yourself. See for example Focus Next Element In Tab Index, or How to focus next input field on keypress if your DOM is simple enough that the input fields are siblings with the default tab order.
From the spec:
The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.
There is nothing in the spec to suggest that enterkeyhint actually affects the behaviour of the Enter key.
I have a checkbox, and then I have a <label> with a for attribute which is used to activate this checkbox. There is an <img> within this label. Usually, clicking the image changes the checkbox, but when text is selected elsewhere in the page it doesn't always work on the first click. Example:
Select this text! Then try to activate the checkbox by clicking the image while text is still selected:
<input id='check' type='checkbox'>
<label for='check'>
<img style='height: 75px' src='https://codepo8.github.io/canvas-images-and-pixels/img/horse.png'>
</label>
It works as expected in Firefox (only takes one click, and is reliable), so I'm inclined to believe this is a browser issue, but am not 100% sure. Is there anything else that could be causing this, and any possible way to work around it?
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.
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>
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/