Develop Reference

JavaScript focusout and specific key

I have the following:
$(selectorClass).focusout(function (e) {
which is triggering if the focus is changed, but how can I modify this so that it also triggers if the enter key is pressed?
Anyone have any examples?

You can factorise your code calling the same function in both events :
function MyCallBack(e)
{
// Your event code goes there
console.log("called");
}
$("#test").focusout(MyCallBack);
$("#test").on('keypress', function(e)
{
if(e.which == 13) // check enter/return key
MyCallBack(e);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="test">

Since you have already written code for focusout event, all you need to just trigger the event when enter key is pressed.
jQuery trigger can be used.
$(document).keyup(function(e) {
if (e.key === "13") { // check enter/return key
$(selectorClass).trigger("focusout");
}
});

Selecting a Datalist element tied to input by using enter key

With a simple input and datalist combination like this:
<input type="text" class="form-control dropdown-input" id="standardInput" name="standardInput" tabindex="7" list="listForStandardInput"/>
<datalist id="listForStandardInput"></datalist>
I would like to enable keyboard navigation and selection. When focus is inside the input element I can use the up/down arrow keys to make selections but when I hit the enter key a form submission occurs.
When I use jQuery-based JavaScript to try and prevent that the form still submits.
$(function () {
'use strict';
$('#standardInput').on('keypress', function (e) {
if (e.keyCode === 13) {
e.preventDefault();
}
});
});
Is there anyway I can allow the use of the enter key to select elements of the datalist that is tied to the input element?

Try using e.which instead of e.keyCode.
$(function () {
'use strict';
$('#standardInput').on('keypress', function (e) {
if (e.which == 13) {
e.preventDefault();
}
});
});

Try using keyup() instead:
$("#standardInput").keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});

jquery find next element without attribute

I have a large form that I want to navigate through by pressing enter instead of tab. I have a simple script which worked fine until I added some disabled fields into the mix. How can I skip the fields that have the attribute of disabled?
I've tried using a loop but I cannot get it to skip the two disabled fields together and focus to the next one, as it seems to stay on the field before the disabled ones.
Failing that, is there a way to replace the enter keyCode of 13 with the one for tab? I've tried a few solutions here but none of them seem to work
$('input').on('keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
$('input')[$('input').index(this)+1].focus();
}
});

You can use the :enabled selector.
$('input').on('keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
$('input:enabled')[$('input:enabled').index(this)+1].focus();
}
});
JSFiddle

<input />
<input />
<input disabled="disabled"/>
<input />
$('input').on('keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
var enabledInput = $('input').not('[disabled]');
enabledInput.eq( enabledInput.index(this) + 1 ).focus();
}
});

You can just filter the collection and remove the disabled inputs, and caching the selectors saves you three DOM lookups.
Note that there is a slight difference between :enabled and .not([disabled]), the former selects elements that have their boolean disabled property strictly equal to false, while the latter selects elements that do not have a disabled attribute set (regardless of its value).
var inputs = $('input');
inputs.on('keydown', function (e) {
if (e.keyCode === 13) {
e.preventDefault();
var enabled = inputs.not('[disabled]');
enabled.eq( enabled.index(this) + 1 ).focus();
}
});

jquery - add event handler on event that takes another event as argument

I am trying to call a function scheduleAdd when the enter button is hit, but I only want it to work if an input with the id 'addSchedule' is in focus. Here's what I have:
$('#addSchedule').focus(function(e) {
var evt = e || window.event;
if(evt.keyCode == 13) {scheduleAdd};
});
I know the code inside the .focus works, because I tried it on its own and it triggers the function scheduleAdd when the enter key is hit. How can I make this conditional on 'addSchedule' being in focus?
Also, more generally, I was wondering if there's a standard way to ascribe event handlers conditional on a second event, such as nesting .on() or something.
Thanks.

Demo on fiddle
HTML:
<form>
<input id="addSchedule" type="text" />
</form>
Javascript:
$('#addSchedule').keydown(function (event) {
if (event.which == 13) {
event.preventDefault(); // This will prevent the page refresh.
scheduleAdd();
}
function scheduleAdd() {
alert("Add the schedule");
}
});

Simply the keydown event, and decide to do something or nothing based on whether the current element has the specified id:
$(document).on("keydown", function() {
if (!$("#addSchedule").is(":focus")) return;
// do stuff
});
Alternatively you can also check for the identity of the focused element with document.activeElement.id === "addSchedule" if you don't mind that's not enough jQuery. ;-)

How to go to next textbox when enter is pressed?

Hi guys I'm learning Javascript and I would like to ask you guys how can I go to the next textbox after inputing text when I press the enter button in the keyboard. thank you

You can use .keyup() to keep track of when user finish key in a character and e.keyCode to get which key was pressed, if it's 13(means enter) then use .focus() to focus the next textbox element:
$('input[type="textbox"]').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
Fiddle Demo

Try this code :
$('#inputform').on('keydown', 'input', function (event) {
if (event.which == 13) {
event.preventDefault();
var $this = $(event.target);
var index = parseFloat($this.attr('data-index'));
$('[data-index="' + (index + 1).toString() + '"]').focus();
}
});
Help Link

I've developed a plugin to include enter event.
(function ($) {
$.fn.enter = function (func) {
this.bind('keypress', function (e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);
You can call it like this:
$('#input1').enter(function(){ $(this).next().focus(); });

You can go to the next field in many ways, as demonstrated by all the answers here, but don't forget to assign the order of what is actually NEXT as well. You can go from field to field with the TAB button, and the layout of your site may not always go in the order you'd expect or want. The solution to this is to add tabindex="" to your fields as such:
<input type="text" tabindex="1" />
<input type="password" tabindex="2" />
<input type="submit" value="Log In" tabindex="3" />