How to disable focus on specific html elements? - javascript

I have custom input component in vue js, and in this component i have input and two buttons.when input loose focus, i want to focus on next input, but now it focus on those buttons.
finally i should press tab key three times to focus on next input.
Is there any html attribute for disabling focus on some elements? or there is a javascript way?

The tabindex attribute controls tabbing. Set it to -1 and the tab key will not stop on that element.
<button tabindex="-1">click me</button>

You could use the blur event which is an equivalent of https://www.w3schools.com/jsref/event_onfocusout.asp
<input v-on:blur="handleBlur">
To trigger something when you lose focus.
You also could create a tabindex tabindex="0" on elements to determine the order of tabbing.
Unfortunately you can't make an element non focus-able unless you want to disable the whole element. Because then you couldn't type anything into that input.

Related

Event Control with KeyPress 'Tab'

So I have several input forms that are disabled until they are filled out in sequence because of data calls to the server based on their selections. I have a custom dropdown that allows me to do a typeahead and click the item I want. When I click the item, the field unlocks with a combination of onblur and onchange events that take place for my data model. The issue that comes into play for me is I want the user to be able to tab. But when I hit tab, the onblur and onchange haven't disabled the field so it skips several fields that it shouldn't. Is there any suggestions on preventing a tab keypress skipping the disabled element? Can I tab and focus on a disabled element?
That is not possible, as the docs say:
A form control is disabled if its disabled attribute is set, or if it is a descendant of a fieldset element whose disabled attribute is set and is not a descendant of that fieldset element's first legend element child, if any.
A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.
So you can not click on those elements, and you can not focus element, that can not be clicked.
https://www.w3.org/TR/html5/forms.html#concept-fe-disabled
So the only option if you need to allow focusing of those elements is not to use disabled attribute at all. You could use .disabled class instead and bind on key events to suppress editing of the value.
Assuming you are willing to temporarily enable the disabled element (thus making it writable), this can be done by checking whether the next element has the disabled attribute with hasAttribute(). If it does, you can change this attribute to false before the keydown returns true, and thus the keyup will tab to the disabled element.
Additionally, you can set a new attribute wasDisabled, which you can then check against with $(this)[0]. If the element has this class, you can re-disable the element once you tab off it again.
This can be seen in the following jQuery example:
$('input').on('keydown', function(e) {
if (e.keyCode == 9) {
if ($(this).next()[0].hasAttribute('disabled')) {
$(this).next().attr('disabled', false);
$(this).next().attr('wasdisabled', true);
}
if ($(this)[0].hasAttribute('wasdisabled')) {
$(this).attr('disabled', true);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<input disabled>
<input>
Hope this helps! :)
I ended up switching it to a readonly property. The readonly allowed me to tab to it and focus on it while not being able to type in it until the the blur and change completed.

Hidden focus on blur of an input element in dom

A little Explanation : I am using List view control of kendo UI(Telerik). I am triggering an update event of that control after editing the fields in list view. The list view control is having some text-boxes, a dropdown,checkbox and a submit button. When a user change something, ideally it should trigger update but its not doing update because control is not able to judge if there is a change in model.
It is only working if I input something in textbox and just click on outside of textbox i.e just do a onblur before hitting submit. I don't know why it is happening but what I need is to just trigger a focus event but in a hidden mode so that user is unaware of it but it just happens after a user input something in textbox so that the list view control works successfully.
I am trying to do it like below but it will get noticed to user. How can i trigger focus in hidden mode after a user just enter something in textbox before hitting a submit?
function BlurFunc() {
debugger;
$(this).closest('li').find('.inputField').focus();
}
Without your code it is not clear whether you are using MVVM data binding to your model, but this may help; from http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value:
By default the value binding relies on the change DOM event, which is
raised after blurring the element whose value has changed. This means
that the value from the View-Model is updated when the element loses
focus. The data-value-update attribute can be used to specify a
different DOM event, such as keyup or keypress. The keydown event is
not supported, because the DOM element value is not yet updated when
that event triggers.
For example, try adding data-value-update="keyup" as an attribute to your text box input element:
<input data-value-update="keyup" data-bind="value: inputValue" />
This should then update the model value upon each key press and not wait until focus has been removed.

How does browser/HTML decide where focus of cursor should be?

If we don't manually set any of the HTML elements to be focused using javascript, how does HTML decide which element to be focused?
It is done via tabindex attribute. By default it goes through focusable elements by position in page, but you can modify this behaviour.
From linked article:
Focusing non focusable elements:
tabindex=0
When tabindex is set to 0, the element is inserted into the tab order based on its location in the source code. If the element is focusable by default there’s no need to use tabindex at all, but if you’re repurposing an element like a span or div, then tabindex=0 is the natural way to include it in the tab order.
Ignore some focusable elements:
tabindex=-1
When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order.
And finally: choose by yourself the order, no matter position of the element:
tabindex=1+
It imposes a tab order on the content that bears no resemblance to the expected tab order.
If you mean "What tells the browser which elements can be focused?" then you are looking for the tabindex attribute. Adding this to an element will allow an input device (i.e. mouse, keyboard) to trigger a focus state on the element.
If your question is basically, "how are things focused on?", this is done using an input device, i.e. mouse, and keyboard.
if you mean when the page loads you can use the autofocus attribute
<input type="text" autofocus>
There is actually no element that gets the focus by default.
We can check this pretty easily by creating a simple site and log
document.querySelectorAll(":focus")
to the console.
You will see that it will return an empty array, meaning that no element is focused.

How to prevent body to receive focus when .blur method was called on a element?

Why browsers do not track the focusable elements, so that when we call blur on some element, the element, which was focused before, receives focus, and not the body?
Assume, there are several focus-capable elements on the page. The first one should be focused on load. Setting autofocus handles this. Later on some event we manually focus the second element, and again, later, on some other event, we blur that second element. The expected behaviour would be that previous focused element receives focus. But actually the body element gets activated (document.activeElement === document.body)
Setting <body tabindex=-1> has no effect.
Here is a simple demo: https://jsfiddle.net/9oenrguv/ The behaviour I would expect is: when we click the button, after a second the first input is focused, but instead body element is focused, though the first input was previously focused and also has autofocus attribute. Could somebody please explain, why body is focused, and if there is any way to prevent this?
Is the manual tracking of the previous active element is the only one way to achieve this?
Thank you.

Stop selection of element on background double-click

I have a problem that when the background is double-clicked the first element is selected.
Check out this fiddle:
https://jsfiddle.net/cb6fjr7n/1/
<input style="text" value="lala"/>
If you double-click outside of the input the input will get selected, but it still doesn't have focus because you can't type.
I need to stop this behavior. I want no selection, no focus, no highlight or anything like that when double-clicking. And not just a cosmetic fix, I don't want the focus to move at all.
I still need to be able to input text in the input field though when the input itself is clicked upon.
Just use the css property user-select
Check out this fiddle
https://jsfiddle.net/34kuf1c1/
Just add disabled to your input !
<input disabled style="text" value="lala"/>

Categories