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
Related
Here is the code for keypress function, which is allowing only numbers
http://jsfiddle.net/lesson8/HkEuf/1/
But, for the same keycodes, keyup function is not working. I mean, if I use
$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keyup(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
The reason for using keyup is to get the current entered value in the textbox. If I use keyup function, I will get the current value. But, If I use keydown or keypress, I am getting the previous or existing value in the textbox
see the updated code with different functions
http://jsfiddle.net/dgireeshraju/HkEuf/7300/
this is the example with keydown, which is giving the existing value.
KeyUp fires after the character inserted only, as you can see your function is actually calling and warning message is displaying.
If you try the same code with KeyDown it will work as the event will be called before a character is inserted
//called when key is pressed in textbox
$("#quantity").keydown(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
Key up fires when the user releases a key, after the default action of that key >has been performed.
Keypress fires when an actual character is being inserted in, for >instance, a text input. It repeats while the user keeps the key depressed.
Your code is actaully working in both the cases (you can see the error message atleast ) but since this event are different so is the result. To make it work with keyup you need to empty the input element again since by that time the value has already been entered in input element
$("#quantity").keyup(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$(this).val(''); //<--- this will empty the value in the input.
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
NOTE: However emptying the input does removes the complete value even when there are numbers in it so, I prefer keydown in such cases.
Updated
This is a little hack on input value but (I will still prefer to go with keydown), Use this if you really want keyup to work :). since I am modifying the default browser behaviuor, you might also need to think of lots of other cases here.
$("#quantity").keyup(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
if(e.which != 13){ //<--- don't remove when entered is pressed.
$(this).val(e.currentTarget.value.substr(0, e.currentTarget.value.length - 1));
}
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
console.log(e.currentTarget.value);
});
working fiddle
I want to write a code that if a user press a key, It changes the keyCode or charCode of the User event and trigger the event with a new charcode,
I wrote this code in jsfiddle but this code doesn't work because of too much recursion.
function convert(e, elem) {
function getKey(event) {
if (event.which == null) {
return event.keyCode // IE
} else if (event.which != 0 && event.charCode != 0) {
return event.which // the rest
} else {
return null // special key
}
}
var key = getKey(e);
key++;
return key;
}
$(".myInput").keypress(function (e) {
var returnedKey = convert(e, this);
e.which = e.keyCode = returnedKey;
$(this).trigger(e);
});
<input type="text" class="myInput" />
any Idea that help my code work would be appreciated.
Thanks alot.
Regarding the recursion issue, you need to add a stopping condition, for example:
$(".myInput").keypress(function (e) {
var returnedKey = convert(e, this);
e.which = e.keyCode = returnedKey;
if(!e.isSecondTrigger){
e.isSecondTrigger = true;
$(this).trigger(e);
}});
This way, you only change the value once. However, as was stated by LShetty in the comments section, the event values are read only - you can't change the value of the button that was already pressed and in that way change the input text. In order to do this, you need to manually change the value of the input text after each user action (i.e. hold the value of the input text at each key press, modify it when the user presses a key, and then overwrite the input field value with the output).
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/
I'm trying to get the text from a textbox as a user types, so that I can parse it and display information accordingly as the user enters a command. However, it seems as though the function I'm writing is getting the text from the box before the letter is entered into the text box. How do I prevent the function from grabbing the content from the textbox before the typed character is entered? I considered grabbing the id of the key and altering the inputted string accordingly, but I feel like there should be a better way.
The code:
$('#inputConsoleForm').keydown(function(event){
//Get key code
var code = (event.keyCode ? event.keyCode : event.which);
//Get console text (doesn't behave as expected)
var consoleCommand = document.inputConsoleForm.console.value;
function parseConsoleCommand(consoleCommand) {
/* Returns true if command is valid*/
}
if(code === 13) {
event.preventDefault();
if(!parseConsoleCommand(consoleCommand))
alert("INVALID COMMAND LINE");
else
attemptExecute();//Runs the command
}
if(code === 32 || (code >= 48 && code <= 123) || code === 61 || code === 109 || code === 188 || code === 8) {
if(parseConsoleCommand(consoleCommand)){
$(document.inputConsoleForm.console).css("background-color", "#FFDFDF");
}
else{
$(document.inputConsoleForm.console).css("background-color", "");
}
}
});
You could use the HTML5 input event (falling back to the propertychange event in IE < 9). Here are two answers detailing how to do this:
jQuery keyboard events
Catch only keypresses that change input?
Use "change" for best results I'd say. You could continue to use keydown (or keyup) but you'll have to fetch the key being pressed from the event object and append it to the text string.
I need to submit the content of a form when I press the Enter key, but only if the form has no error message. I built up the following function:
$(targetFormID).submit(function (e) {
var mess = error_m(targetDiv);
if (e.keyCode == 13 && mess.length > 0) {
e.preventDefault();
e.stopPropagation();
}
if (mess.length == 0 && e.keyCode == 13) $(targetFormID).submit();
});
In this function the mess variable is getting the error message returned by function error_m, the rest is simple code condtion but it doesn't work.
Need some help with this!!
Submitting the form when the Enter key is pressed is default browser behaviour. Don't mess with it. Just validate the form in the submit event.
$(targetFormID).submit(function (e) {
var mess = error_m(targetDiv);
if (mess.length > 0) {
e.preventDefault();
}
});
One other possible problem: what is targetFormID? If it's actually a string containing an element ID, you'll need
$("#" + targetFormID).submit(/* Same function as above */);
If it's a reference to the form element then $(targetFormID) is fine but your variable is misleadingly named.