This question already has answers here:
How to combine keypress & on click function in JavaScript?
(5 answers)
Closed 5 years ago.
I have the following two functions:
$("input").keypress(function(event) {
if (event.which == 13) {
//code
}
});
$('#login_submit').click(function () {
//code
});
The code which is being used in the functions are EXACTLY the same code, basically code duplication. So i was wondering if there is a way to combine these functions with an AND statement?? There is an question on Stack but it aks for an OR logic. If you want the OR solution here
EDIT: I am trying to make somthing like an explorer. Now I want to hold "shift" and click on an "input" to mark them all. So i need the "onclick" on my input element to be true AND my keydown to be true.
After your edit, I believe what you are looking for is something like the following.
var shift_hold = false;
$(document).keydown(function(e) {
if(e.which === 16) {
shift_hold = true;
}
})
$(document).keyup(function(e) {
if(e.which === 16) {
shift_hold = false();
}
})
$('input').click(function() {
if(shift_hold) {
//your code here
}
})
I want to hold "shift" and click on an "input" to mark them all. So I need the "onclick" on my input element to be true AND my keydown to be true.
Within the click event, you can check if a key is also pressed down (click and key-is-down).
You can use the event object to see which keys are pressed. shift/control/alt have their own explicit properties.
Example:
$("input").click(function() {
console.log(event.shiftKey)
if (event.shiftKey) {
$(this).addClass("selected")
} else {
$(this).removeClass("selected")
}
// could use .toggleClass("selected", event.shiftKey) here,
// shown expanded for clarity
});
.selected {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Shift-click input to select, click to unselect
<input type='text'>
<input type='text'>
Related
My web page uses iCheck checkboxes. I am trying to get event when Shift key is pressed along with clicking on checkboxes. but no where in the documentation, iCheck gives that notification like normal document.click(function()) gives.
I am using
$('input[name=selectinp]').on('ifChanged', function(event){
...
});
Here, event.shiftkey is undefined.
Please help.
I know this is an old question, but I will answer it to help any future folks that are looking for solutions. The iCheck library does not pass through the entire click event, so you can't check for event.shiftKey. Instead, you have to manually build your own variable that stores whether the shift key is pressed or not:
var shiftIsPressed = false;
$(window).keydown(keyDownHandler);
$(window).keyup(keyUpHandler);
function keyDownHandler(event) {
if (event.key == "Shift") {
shiftIsPressed = true;
}
}
function keyUpHandler(event) {
if (event.key == "Shift") {
shiftIsPressed = false;
}
}
$('input[name=selectinp]').on('ifChanged', function(event){
if (shiftIsPressed) {
...
} else {
...
}
});
This question already has an answer here:
Keyup event handler shows slow performance
(1 answer)
Closed 5 years ago.
Here is my code:
$('#MyInput').on('keyup', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});
I want to run a function when the input has only one character.
The problem is that if the user type a word really fast, the 'keyup' event seems to be called starting from the second character, which means it will not call ajaxSearch() method.
Is there any way to improve the 'keyup' event speed to call the function when it has only 1 character?
When user types too fast, he/she may have not released the previous key yet, so keyup technically hasn't happened yet.
Try keypress instead of keyup
$('#MyInput').on('keypress', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});
Edit
On keypress input's value property has not be been updated yet, so catch keyup as well in case user only inputs a single character.
$('#MyInput').on('keypress', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});
$('#MyInput').on('keyup keypress', function(e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val(),e);
}
});
function ajaxSearch(value,e) {
console.log(value, e.type)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="MyInput">
Try keypress instead of keyup
$('#MyInput').on('keypress', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});
This question already has an answer here:
Click event not working for dynamically added Li->span->id
(1 answer)
Closed 6 years ago.
If i add the search bar right away, it works, the console returns the value of the search field every time i press enter, but if i add the search bar after the image was clicked it doesn't work.
http://codepen.io/Nadaga/pen/QEVaGA
$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
})
$('#search-field').keypress(function (e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
Since, the search-field is dynamically created, It has to be added like this (on the $document),
$(document).on('keypress', '#search-field' ,function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
$('#search-field').keypress(function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
})
Click event only works if the element already exist in html code. So the click event doesn't fire.It won't consider the new element which is created dynamically after the page loaded. Dynamic elements are created with the help of javascript or jquery(not in html).
source: https://stackoverflow.com/a/29674985/1848140
I am trying to get it so that when I press enter while focused on an input, it alerts something.
I have an input tag,
<input></input>
Then I have javascript,
document.getElementsByTagName("input").keyup = function(e) {
if (e.keyCode == 13) {
alert("1111");
}
};
Why is this not working? Here is my codepen: http://codepen.io/darkfyi/pen/meBdzZ.
There are two problems with your code:
The document.getElementsByTagName method returns a HTMLCollection, so you must iterate through this collection, or use the first item by using [0].
If you want to delegate the event keyup by its property, you should use .onkeyup = function() {, as there is no HTMLInputElement.keyup method. You would use keyup in addEventListener method, for example.
So, your code should be something like:
document.getElementsByTagName("input")[0].onkeyup = function(e) {
if (e.keyCode == 13) {
alert("1111");
}
};
Updated codepen.
I have a grid with three read-only columns. Whenever user goes in there and try to edit by pressing backspace, I need to alert by giving a message. I am using this script and it doesn't work? Can anyone correct me?
$(document).ready(function () {
$('#txtCode').bind('keypress', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}
});
instead of keypress try with keyup or keydown with .on() method:
$('#txtCode').on('keyup keydown', function (e) {
You can bind multiple events like this too.
and one more thing closing of $('#txtCode') seems to be missing });
$(document).ready(function () {
$('#txtCode').on('keyup keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}); //<----");" this is the closing you misssed this
});
See the fiddle in action
If this is all the code you are testing, you weren't closing the function properly, annotated in my posted code. Also use keyup instead of keypress
$(document).ready(function () {
$('#txtCode').bind('keyup', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}); /*<-- You weren't closing your function properly*/
});
Fiddle
You do indeed need to add a return false statement to ensure the character doesn't get deleted anyway. I also took it a step further and extended jQuery with a preventKeyUsage method.
$(document).ready(function () {
$.fn.preventKeyUsage = function (key, message) {
return this.each(function () {
$(this).on('keydown', function (e) {
return (e.keyCode === key) ? (function () {
alert(message);
return false;
})() : true;
});
});
};
$('#txtCode').preventKeyUsage(8, 'The column is read-only and is not editable');
});
New Fiddle
Working code is:
Java Script Code:
$(document).ready(function () {
$('#txtCode').bind('keypress keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
Here is the updated code
<input type="text" id="txtCode" />
$(document).ready(function () {
$('#txtCode').bind('keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
return false;
}
});
});
Fiddle Demo
Try this
$(document).ready(function () {
$('#txtCode').on('keyup', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
DEMO (Working on Firefox & Chrome)
$('#textbox').keydown(function(event){
if(event.keyCode == 8){
alert("Backspace not allowed..");
return false;
}
});
http://jsfiddle.net/xF9jL/1/
You are missing }); of keypress. google chrome have issues with keypress, u can try keydown instead
$(document).ready(function () {
$('#txtCode').bind('keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
To use delete ,arrows, backspace keys in Chrome you must use keydown. keypress on these keys work only in Firefox and Opera.
DEMO
You can probably solve the underlying issue by either not using an element that accepts input, or by using the disabled attribute:
<textarea name="example" disabled>Some text</textarea>
If you are posting back to the sever, you should assume the user has edited the field, no matter what you do to prevent it.
keypress event won't give keycodes for all keys in all browsers . Better use keyup or keydown event which gives keycode for all keys in all browsers
In order to understand the difference between keydown and keypress, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers.