I'm trying to get the index of an input between a set of inputs. Basically, I have a table that contains, on more than one row, many inputs.
Once the user press the "enter" button, while the input is focused, I need to jump to the next input field, as the "tab" key do.
I was following this accepted response, and this is what I've done so far: Fiddle
CODE
$(document).keypress(function(e){
if( e.which == 13 && e.target.nodeName == 'INPUT'){
var inputs = $("#inputsTable input.td_in");
alert(inputs.index(this));
}
});
as you can see, every time you focus an input and then press ENTER, the popup msg says "-1"..
What am I doing wrong? I've been struggling with this piece of code for an hour, and I'm giving up.
I found out that replacing this with e.target also works.
CODE
$(document).keypress(function(e){
if( e.which == 13 && e.target.nodeName == 'INPUT'){
var inputs = $("#inputsTable input.td_in");
alert(inputs.index(e.target));
}
});
That's because this references the document, not your input.
Use .on(), and pass it an input.td_in selector:
$('#inputsTable').on('keypress', 'input.td_in', function (e) {
if( e.which == 13 ) {
var inputs = $("#inputsTable input.td_in");
alert(inputs.index(this));
}
});
P.S. You should probably cache that selector.
$(document).on('keypress', 'input', function (e) {
if( e.which == 13 ){
var inputs = $("#inputsTable input");
var the_index = inputs.index(this);
inputs[the_index+1].focus();
}
});
http://jsfiddle.net/5DwHw/1/
Related
I’m trying to clear a text field after a keyup function is triggered.
I used a simple val('') to clear but it’s not working. Also if ever. I want my text field to not allow entering period or . on the first place, like .12.
Here is my keyup function:
$('#gross-mass').keyup(function(event) {
var currentVal = $(this).val();
if (parseFloat(currentVal) == 0.00 && (event.which == 48 || event.which == 96)) {
//currentVal = currentVal.slice(0, 3);
currentVal.val(' ');
}
$(this).val(currentVal);
});
currentVal isn't a function, it's a string. You can set its value like this:
currentVal = ' '
First of all, you need to use $(this).val(""), not currentVal.val(' '); (in my example it's just el.val("") because I have stored var el = $(this)). And you should remove this row before the end of the method: $(this).val(currentVal);, because it sets input's value back to currentVal. Here is the working example, try to type 0 for example, input's value will be cleared after keyup event:
$('#gross-mass').keyup(function(event) {
var el = $(this)
var currentVal = el.val();
if (parseFloat(currentVal) == 0.00 && (event.which == 48 || event.which == 96)) {
el.val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="gross-mass">
I have barcode input in which I enter barcodes multiple times, every time I add barcode, barcode is added to the list even if I only press enter with empty value.
I want to start function only if user press enter key == 13 and value is not empty.
This is code:
if(key == 13) {}
I tried but without success:
var value = $("#barcode").val();
if(key == 13 && value.length > 0)
{alert("This works!")}...
You need to run your code under either the keyup or keypress event. Assuming you use jQuery to attach the event, you should also use the which property of the provided event object to get the keycode. Try this:
$('#barcode').keypress(function(e) {
if (e.which == 13 && this.value) {
alert("This works!")
}
})
Working example
I have an HTML form with several text fields. So, I want to move cursor from a text field to next text field when I press the enter key, but the form should not be submitted. How can I do this? If there is a code example it may more helpful to me.
press the tab key on your keyboard instead of enter.
I'm using this function to do what you ask for:
$(document).on("keypress", ".TabOnEnter" , function(e)
{
if( e.keyCode == 13 )
{
var nextElement = $('[tabindex="' + (this.tabIndex+1) + '"]');
console.log( this , nextElement );
if(nextElement.length )
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
Use the 'TabOnEnte' class on the fields you want this class to apply on.
Also to prevent user from submittin with enter key:
if (e.which == 13) {
e.preventDefault();
}
i got the answer. it should put in the input tag which we want.
onkeydown='if ((event.keyCode == 13 && document.getElementById("field_0").value!="") && event.which == 13){
document.getElementById("field_1").focus();
event.preventDefault();
}'
If all of the text in a form field is selected and then the Backspace or Delete key are used, I want to be able to run some additional code. I have tried using change, blur, keypress, keydown. None seem to work.
Example that doesn't work:
$('input[id^=txtDate_]').on('keydown', function() {
enableSaveChanges();
});
Here is one way - http://jsfiddle.net/jayblanchard/6Uq85/
$('textarea[name="foo"]').keyup(function(e) {
var currentText = $(this).val();
if( 0 == currentText.length && (e.keyCode = 46 || e.keyCode == 8)) {
console.log('empty');
}
});
I should add that I am a fan of keyup() here as the event order for keypress,keydown and keyup are different. You can test to see which makes more sense for you. The reason that I use keyup here is because the textarea (or input) isn't actually empty when you press the key.
Use the key codes for 'delete' and 'backspace'
delete = 46
backspace = 8
example:
HTML:
<input type="text" id="input">
jQuery:
jQuery('#input').keyup(function(e) {
var str = jQuery('#input').val();
if( (e.keyCode == 46 || e.keyCode == 8) && str == "" ) {
alert("Hey");
}
});
EDITED: check for empty input field
Try this way for
<input type="txt" id="txt"/>
$('#test').keyup(function(e){
if($('#test').val() == '' && e.keyCode == 46 || e.keyCode == 8)){
console.log('Input is emptied');
}
});
I'm make a rather long form, and I want to be able to break the form down into tabbable section, then when leaving that last input/select box, the next section will slide open, while the previous slides shut. I'm also wantning to have the fieldset legend, clickable to achieve the same thing.
A good example of what I'm looking for can be found here: http://jsfiddle.net/s4vcX/
Here is what I'm currently working with: http://jsfiddle.net/AUf3U/
If you'd like, you can see the current JavaScript code here:
$("fieldset label").hide();
$("fieldset ul").hide();
$("fieldset:first label").show();
// show when legend is clicked while hiding rest
$("legend").bind("click", function () {
$("fieldset label").not($(this).nextAll("label")).hide();
$(this).nextAll("label").show();
});
//handle shift-tab on first input of each field set
$("fieldset").find("input:first").bind("keydown", function (e) {
if( e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
if(previous.length==0)
previous = $(this).closest("form").find(".hidesfieldset:last");
previous.find("label").show();
previous.find("input").last().focus();
e.preventDefault();
}
});
//handle tab on last input of each field set
$("fieldset").find("input:last").bind("keydown", function (e) {
if( !e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
if(next.length==0)
next = $(this).closest("form").find(".hidesfieldset:first");
next.find("label").show();
next.find("input").first().focus();
e.preventDefault();
}
});
If someone can point out what`s going wrong here, I would be incredibly greatful, this has become a huge pain in the ass, and have to impelment this across about 50 forms, so changing the structure of my form is not necessarily a good thing.
The problem is your input selector, since you are using element selector it selects only elements with tag input but in your first fieldset the last element is a select element.
Try to use the :input selector
//handle shift-tab on first input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
if (e.shiftKey && e.which == 9) {
$(this).closest(".hidesfieldset").find("label").hide();
var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
if (previous.length == 0) previous = $(this).closest("form").find(".hidesfieldset:last");
previous.find("label").show();
previous.find("input").last().focus();
e.preventDefault();
}
});
//handle tab on last input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
if (!e.shiftKey && e.which == 9) {
$(this).closest(".hidesfieldset").find("label").hide();
var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
if (next.length == 0) next = $(this).closest("form").find(".hidesfieldset:first");
next.find("label").show();
next.find(":input").first().focus();
e.preventDefault();
}
});
Demo: Fiddle