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();
}
});
Related
I have a text input in html that is affected by a function exectued by .change() events from different radios and checkboxes. I'm trying to make it so that if a user types into the input, this function will no longer run when a .change() event happens in the aforementioned radios and checkboxes (the user must still be able to use these radios and checkboxes). However, if the user leaves the input blank and clicks away, the script will run again. I hope is possible.
Here is my take on this so far:
Using.prop('diabled' isnt viable because it completely disables the input, making the user unable to type in it, so I need another solution.
$(function() {
$('#burger-navn').on('input', function() {
$("#burger-navn").prop('disabled', true);
});
//When the input (#burger-navn) is typed into it should be "disabled"
$('#burger-navn').focusout(function() {
if ($(this).val().length == 0) {
$("#burger-navn").prop('disabled', false);
}
});
//But if its clicked out of while its blank, it should be able to run again.
$("#okseinput, #laksinput, #kyllinginput, #vegetarinput").change(function() {
if (!$("#burger-navn").not(':disabled')) { //condition that tests
navngenerator();
}
});
});
To solve this I simply created a separate input tag that I could add and remove disabled attribute from, and check if it has that attribute.
So in html:
<input id="burger-navn" type="text"/>
<input id="toggle" disabled="disabled" style="display:none"/>
jQuery:
var previousValue = $("#burger-navn").val();
$("#burger-navn").keyup(function(e) {
var currentValue = $(this).val();
if(currentValue != previousValue) {
previousValue = currentValue;
$("#toggle").prop('disabled', false);
}//This function will remove disabled from #toggle, when a user types into #burger-navn
});
$('#burger-navn').focusout(function() {
if ($(this).val().length == 0) {
$("#toggle").prop('disabled', true);
}
});
if ($("#toggle").is(':disabled')) {
navngenerator();
}
$("#okseinput, #laksinput, #kyllinginput, #vegetarinput").change(function() {
if ($("#toggle").is(':disabled')) {
navngenerator();
}
});
$(selector).on('change', function(event){
event.preventDefault();
event.stopPropagation();
// the selected field no longer does anything on change
});
is that what you are looking for?
Hi I have a text box as follows:
<input data-val="true" data-val-regex="Alt. Phone is not correct"
data-val-regex-pattern="(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}"
id="AltPhone" maxlength="150" name="AltPhone" tabindex="33" type="text"
value="" class="input-validation-error">
I want to remove class="input-validation-error" on tab key and the code for that is as follows:
$(document).ready(function () {
$("#AltPhone").live('keydown', function (e) {
var code = e.keyCode || e.which;
if (code == 9) {
$(this).removeClass('input-validation-error');
e.stopPropagation();
}
});
});
but still I am not able to remove that class from the text box.Here the function being called and also invoking the following line of the code but still that class is appearing at the text box after the function called finished.
$(this).removeClass('input-validation-error');
there is a proper event to manage tab on input, use blur
$("#AltPhone").on('blur', function (e) {
//code here
});
Use .keydown() event instead.
$(document).ready(function () {
$("#AltPhone").keydown(function (e) {
var code = e.keyCode || e.which;
if (code == 9) {
$(this).removeClass('input-validation-error');
e.stopPropagation();
}
});
});
Working example: https://jsfiddle.net/j2y9w1x6/
After clicking Tab key, inspect the element in Result section to see that validation class has been removed.
Maybe it's because this key intercepts your browser. Try a different key, for example ENTER.
I have the following method which works fine, it skips disabled fields and focus moves to the next active text input. My form has text fields, checkboxes and select lists. How do I add the type select to this so it navigates to type text or select?
I've tried [type=text:select] but it doesn't work
$('input').on('keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
$('input[type=text]:enabled:not(:read-only)')[$('input[type=text]:enabled:not(:read-only)').index(this)+1].focus();
}
});
You can use multiple selector syntax, also cache the result of the element selection to avoid duplication
$('input, select').on('keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
var $els = $('input:text, select').filter(':enabled:not([readonly])');
$els.eq($els.index(this) + 1).focus();
}
});
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. ;-)
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" />