Develop Reference

delete element using remove() while clicking and pressing a key

I want to add a delete mode that the user can enter by pressing a certain key (Im using the key "enter" for now e.which == 13 checks if the key pressed is enter in the below sample)
var checker = 1;
$(document).keypress(function (e) {
if (e.which == 13 && checker == 1) {
checker = 2;
alert("entered delete mode");
$(".element1").click(function (e) {
$(this).remove();
});
}
else if (e.which == 13 && checker == 2) {
checker = 1;
alert("exited delete mode");
$(".element1").each(function (i, e) {
$(this).off("click", "**");
});
};
});
So basically when the user presses enter I check if we are in the delete mode already, if not (checker ==1) we enter it and I add a function on click() for objects with class ".element1"
If the user is in not in delete mode (checker==2), I try to remove the click method.
But for some reason this part does not work.
Thank you all.
EDIT
I also tried to add .click to the .element class: (this way in my mind it should've deleted the element when I hover and press enter)
$(.element1)
.hover(function (e) {
var deletable = $(this);
$(document).keypress(function (e) {
if (e.which == 13) {
deletable.remove();
}
});
});
but whenever I press enter it just deletes all .elements
Any way works for me.

You can't have a second argument on the .off(). Fixed code:
var checker = 1;
$(document).keypress(function (e) {
if (e.which == 13 && checker == 1) {
checker = 2;
alert("entered delete mode");
$(".element1").click(function (e) {
$(this).remove();
});
}
else if (e.which == 13 && checker == 2) {
checker = 1;
alert("exited delete mode");
$(".element1").off("click");
};
});
I also got rid of the second .each(), as suggested in the comments (it wasn't necessary).

Try using on/off like this and not removing the element:
var checker = 1;
$(document).keypress(function (e) {
if (e.which == 13 && checker == 1) {
checker = 2;
alert("entered delete mode");
$(".element1").on('click', function (e) {
// handle click
});
}
else if (e.which == 13 && checker == 2) {
checker = 1;
alert("exited delete mode");
$(".element1").off('click', '**');
};
});

Jquery binding key to body except a class

I'm trying to bind a key to my entire page except to one class of elements.
$('*').not('.textarea-note').keypress(function (event) {
// if key pressed is space
if (event.which == 32) {
alert('space pressed');
event.preventDefault();
}
});
The problem is that I need to do the preventDefault() and when I'm in a textarea then I can't make a space caracter.
Am I doing something wrong or it's not possible to bind to everything except some class or something.
Thanks in advance !
Edit :
After the comment from Roland, I came up with this instead which is working perfectly.
$(document).keypress(function (event) {
// if key pressed is space
if (event.which == 32 && event.target.nodeName != "TEXTAREA") {
if (videoPlaying) {
pauseVideo();
} else {
playVideo();
}
event.preventDefault();
}
});

I think you are looking for this...
$(document).keypress(function(event) {
// if key pressed is space
if (event.which == 32) {
if (event.target.id !== "a1") {// for class $(event.target).attr('class')
alert('space pressed');
event.preventDefault();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="a1"></textarea>
<textarea id="a2"></textarea>
<textarea id="a3"></textarea>

Onkeydown not working javascript

Here is my code
document.onkeydown = function (a) {
if (a.which == 13) {
alert("Not Anymore");
}
}
document.onkeydown = function (b) {
if (b.which == 65) {
auto();
}
}
document.onkeydown = function (c) {
if (c.which == 83) {
auto2();
}
}
Only the last snippet works can someone explain why this is happening
check my website and you can see it isnt working when you press a but when you press b it is
Thanks, I appreciate the help and feedback

You're binding the same event on the document multiple times. So, the later event handlers override the previous event handlers just like the functions with same name does. You need to bind only one event handler and use if... else in it.
You can use this
document.onkeydown = function (e) {
if (e.which == 13) {
alert("Not Anymore");
} else if (e.which == 65) {
auto();
} else if (e.which == 83) {
auto2();
}
};
Also, use addEventListener instead of onkeydown.
document.addEventListener('keydown', function (a) {
if (a.which == 13) {}
...
}, false);

jquery textbox focus event on infinity loop

i am using jquery to validate textbox value.
I have 2 textbox, txt1 & txt2. now, i wrote a jquery function.
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
$("#txt2").blur(function () {
if ($("#txt2").val() == "") {
$("#sscaccode").show();
$("#txt2").focus();
}
else {
$("#sscaccode").hide();
}
});
Now, issue is. when i run the project. my position is on txt1 and when u use Tab to go txt2 with null or blank value. Focus event fire for both one & browser become hang due to infinite loop of FOCUS.
so, how can i handle it?

You should insert a setTimeout in order to set the focus after the blur event.
Second, you should insert a semaphore in order to avoid a loop (see code and comments):
var status = "valid"; // semaphore
$("#txt1").blur(function (e) {
// if we are in programmatically focus, ignore this handler
if(status == "invalid")
return ;
if ($("#txt1").val() == "") {
$("#scarriername").show();
// set semaphore
status = "invalid";
// use setTimeout in order to set focus in the right moment
setTimeout(function() {$("#txt1").focus(); status = "valid"},0);
}
else {
$("#scarriername").hide();
}
});
// same as txt1
$("#txt2").blur(function () {
if(status == "invalid")
return ;
if ($("#txt2").val() == "") {
$("#sscaccode").show();
setTimeout(function() {$("#txt2").focus(); status = "valid"},0);
}
else {
$("#sscaccode").hide();
}
});
DEMO http://jsfiddle.net/SszUf/

try this
<input type="text" id="txt1" />
<input type="text" id="txt2" />
$("#txt2").focus(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
//alert(1);
});
hope this help you

Apparently when you hit the tab button you trigger blur event for both text boxes. With your code when txt1 gets blurred and has no content you get the focus on txt1, but when you do that you also trigger the blur event for txt2 and since it does not have any text in it you get the focus back to txt2. This keeps on going and going, focusing on txt1 and then txt2 and then txt1 and then txt2... You could put a simple if check on the second blur event handler to see if txt1 is still empty, and if so keep the focus on txt1 not allowing the client to pass to txt2:
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
$("#txt2").blur(function () {
if ($("#txt2").val() == "" && $("#txt1").val() != "") {
$("#sscaccode").show();
$("#txt2").focus();
}
else {
$("#sscaccode").hide();
}
});

This is also one of the approach to solve your problem on pressing tab key.
$("#txt1").bind('keydown',function(e)
{
if(e.keyCode == 9)
{
if ($("#txt1").val() == "") {
$("#scarriername").show();
return false;
}
else {
$("#scarriername").hide();
}
}
});
$("#txt2").bind('keydown',function(e)
{
if(e.keyCode == 9)
{
if ($("#txt2").val() == "") {
$("#sscaccode").show();
return false;
}
else {
$("#sscaccode").hide();
}
}
});

$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
if ($("input:focus").length == 0)
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
Just add a line can solve this problem
By the way, the #scarriername should not be something like popup window, which will trigger other blur events
You can test the file below:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input id="txt1"><input id="txt2"><input id="txt3"><input id="txt4">
<hr>
<h1 id="h1"></h1>
</body>
<script type="text/javascript">
$(function(){
$("input").blur(function () {
if ($(this).val() == "") {
document.getElementById("h1").innerHTML += "123";
$(this).focus();
}
});});
</script>
</html>

Toggling a function that depends on a button state?

I'm trying to turn a button-click into a toggle that enables or disables a function, depending on its state. The function allows the enter key to be used for a form submission.
var enterToggle = true;
function enterToggleListener(elem) {
enterKeyPress();
elem.click(function() {
enterToggle = !enterToggle;
console.log('enter-toggle clicked')
if (enterToggle === false) {
console.log('enter toggle false')
// What do I need to add here to stop 'enterKeyPress()'?
} else {
console.log('enter toggle true')
enterKeyPress();
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(e.which == 13){
$('#noteButton').click();
}
});
}
enterToggleListener($('#toggle-button'));
What I don't understand is how to stop the enterKeyPress() function when enterToggle is false. Any suggestions?
EDIT: Cleaned-up code, with #James Montagne's answer added
var enterToggle = true;
function enterToggleListener(elem) {
elem.click(function() {
enterToggle = !enterToggle;
if (enterToggle === false) {
$('#enter-toggle').text('Enter key saves note (OFF)')
} else {
$('#enter-toggle').text('Enter key saves note (ON)')
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
enterKeyPress();
enterToggleListener($('#enter-toggle'));

function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
You can simply check the value of the variable within your handler. This way you don't need to keep adding and removing the handler as seems to be your current approach.
However, if you must add and remove for some reason, you would use off.