We Keep Coding

How to disable focus on specific html elements?

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.

How to get the selected text focus again after contenteditable lost focus and gained it back programmartically

I have a div that the contenteditable attribute is true,
<div tabindex="1" id="editor" contenteditable="true"></div>
I have another div that acts like a button
<div>Click Me</div>
The problem am having is that after typing inside the editor box, I selected some text and when I clicked on the "click me" div the editor box looses focus and thus removing the highlighted text.
I used in js to programmatically send the focus back
document.getElementById("editor").focus()
But after this the selected text is no more selected the cusor just moves to the beginning of the editor box.
How do I get the focus to make sure the initial selected text is selected again after the click me has been clicked

One solution is setting user-select: none on your button-like div. If the browsers you care about support it, it's the simplest (but as discussed in the comments here, someone reported problems with getting it to work in Safari...)
Otherwise you'll have to save and restore the selection using JS, the text range module of rangy.js is useful for that. Check out https://stackoverflow.com/a/57546051/1026 for a usage example; in your case you'll need to save the selection onblur and restore it after processing the click on the button-like div.

ContentEditable label with checkbox inside loses focus

On Chrome (and possibly other WebKit based browsers too), I have an issue where if a checkbox is wrapped inside a label and the label has the attribute contenteditable=true, Chrome fails to focus properly on the label.
<label contenteditable="true">hello <input type="checkbox" /></label>
Clicking on the text fails to focus and instead checks the checkbox.
To focus on the text, it is necessary to select some text and then click on the selection to see the cursor blinking.
To see the wanted behaviour, check on Internet Explorer 11. Clicking on the text itself selects the text, and clicking on the checkbox selects the checkbox.
Is there any fix to this (other than changing the HTML)?

Actually that is what a label is supposed to do
If you insist on doing it as a label you have to prevent the default behaviour of it and cancel the propagation on the checkbox itself:
<!-- Dirty example -->
<label contenteditable="true" onclick="event.preventDefault()">hello <input type="checkbox" onclick="event.stopPropagation();" /></label>
Like I commented before, I would not recommend this. Let the labels do what they are supposed to do and use a span instead.

This is what a label is supposed to do. They make interacting with form field easier (especially on small devices). It is for better UI accessibility.
To see the wanted behaviour, check on Internet Explorer 11. Clicking
on the text itself selects the text, and clicking on the checkbox
selects the checkbox.
You'll need to just use a <span> instead:
<span contenteditable="true">hello <input type="checkbox" /></span>

determine if selectize input has focus

I can usually determine if a particular input has focus using $("#my_input").is(":focus") but this doesn't seem to work for selectize inputs.
I can set the focus for the input using $("#my_input")[0].selectize.focus() but then still $("#my_input").is(":focus") returns false.
When I inspect the element in Chrome I can see that a div right below my_input has the class attribute focus but it is not clear to me how to link this to #my_input.
I have also tried document.activeElement and document.activeElement.parentElement, etc. but no luck so far

Selectize.js is hiding the input you wrote in your markup and shows some dynamic elements instead.
Those are next to your original input.
Try:
if( $("#my_input").next(".selectize-control").find(".focus").length>0 ){
console.log("Selectize is focussed!");
}else{
console.log("Selectize is NOT focussed.");
}
If you follow me on this... By looking in the "next" div if there is a child having the focus class, you'll know if it's focussed or not..

Why does $.change() fire on a submit button?

I have a $.change() event, but when a submit button is pressed, the change event fires again. It is only supposed to fire once when a text is inputted into a input text box.
$('input:submit', top.document).bind('click', function (e) {
alert("submitting")
});
$('input').change(function (e) {
alert("fire");
});

Edit: For whatever reason, a change event is invoked when the input button is clicked. (thanks Anthony)
The way to fix this is simply don't select the submit button.
You can try
$('input:text')
To select only text fields.
Or you can do
$('input:not(:submit)')
To select all input elements except the submit button(s).
Read about selectors here
Edit: Using <button> instead won't work. It still counts as an input field, but it's value is separate from the text displayed on the button.

$('input').change(function(e){ alert("fire") }); applies that event to ALL input elements, including <input type="submit".../>. If you really want EVERY SINGLE text input element to have a change event, you want ``$('input[type=text]').change(function(e){ alert("fire") });` Otherwise, it might be best to use an id or class.

#Mark,
You are spot on and I'd edit you if I could to help out. Maybe someday soon...
#ajowi,
Submit buttons are inputs. At least most of them are:
<input type="submit" />
So Mark,it's not that they are doing anything with the button text, it's that the input, which is a button, is being changed by act of clicking on it.
So his solutions were great. Go with
$("input:text").change