Develop Reference

Javascript interrupt normal behavior on link click momentarily

I want to do something before my page unloads so I'm trying to interrupt normal behaviour momentarily. I tried this but it doesn't seem to work:
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == `a`) {
document.body.classList.remove(`ready`);
document.body.classList.add(`leaving`);
setTimeout(function () {
return true; // return false = prevent default action and stop event propagation
}, 500);
}
}
0.5s is the time I need to display a short css animation before leaving the page.

You can try the following code:
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == `A`) { // !uppercased
e.preventDefault(); // prevent default anchor behavior
var goTo = element.href; // store target url
document.body.classList.remove(`ready`);
document.body.classList.add(`leaving`);
setTimeout(function () {
window.location = goTo; // navigate to destination
}, 500);
}
}

Prevent spaces in input field on keypress event

I'm using the following code to detect multiple keys on a keypress event:
var down = [];
$(document).keydown(function (e) {
down[e.keyCode] = true;
}).keyup(function (e) {
if (down[17] && down[32]) {
// Do something
}
down[e.keyCode] = false;
});
However, this hotkey (CTRL + SPACE) is meant to be used while an input field has focus. So whenever I press the key combination, it also adds a space to the input field.
How can I prevent this from happening? I've looked at ways to disable spaces in input (like this), but I can't figure out how to make it work inside my keypress event only.

You may try this. I hope it helps.
var down = [];
$(document).keydown(function (e) {
down[e.keyCode] = true;
}).keypress(function (e) {
if (down[17] && down[32]) {
var $sampleTextBox = $("input#sampleTextBox");
$sampleTextBox.val($sampleTextBox.val().replace(/\s/g, ''));
alert($sampleTextBox.val().length)
alert("Ctrl + Space Pressed!");
}
down[e.keyCode] = false;
}).keyup(function (e) {
if (down[17] && down[32]) {
var $sampleTextBox = $("input#sampleTextBox");
$sampleTextBox.val($sampleTextBox.val().replace(/\s/g, ''));
alert($sampleTextBox.val().length)
alert("Ctrl + Space Pressed!");
}
down[e.keyCode] = false;
});
--
Thanks,
SuperCoder

I ended up using a different approach, as MelanciaUK suggested.
On the keyup event, it removes the last character in the input field.
var down = [];
$(document).keydown(function (e) {
down[e.keyCode] = true;
}).keyup(function (e) {
if (down[17] && down[32]) {
// Do something
input = $(':focus');
input.val(function (index, value) {
return value.substr(0, value.length - 1);
});
}
down[e.keyCode] = false;
});
While it doesn't prevent the space from being added, it removes it immediately.

Disable keyboard shortcuts when text field or textarea has focus using pure JavaScript

I have a simple script that uses left and right arrows to move to next and previous blogpost.
var nextEl = document.getElementById("pagination__next__link");
var prevEl = document.getElementById("pagination__prev__link");
document.onkeyup = function(e) {
if (nextEl !== null) {
if (e.keyCode === 37) {
window.location.href = nextEl.getAttribute('href');
}
}
if (prevEl !== null) {
if (e.keyCode === 39) {
window.location.href = prevEl.getAttribute('href');
}
}
return false;
};
But it also works when I have text input or textarea focused. What would be the best way to disable the keyboard shortcuts when focused?
Thanks!

Disable event propagation of the input to the document
nextEl.onkeyup = prevEl.onkeyup = function(e){ e.stopPropagation(); };

Making a JavaScript code works with any element

document.getElementById("but").onclick = showDropDown;
function showDropDown(e) {
document.getElementById("but").onclick = function() {};
if (e.stopPropagation) e.stopPropagation(); // W3C model
else e.cancelBubble = true; // IE model
document.getElementById("window").style.display = "inline-block";
document.onclick = function(e) {
var ele = document.elementFromPoint(e.clientX, e.clientY);
if (ele == document.getElementById("but")) {
hideDropDown();
return;
}
do {
if (ele == document.getElementById("window")) return;
} while (ele = ele.parentNode);
hideDropDown();
};
}
function hideDropDown() {
document.onclick = function() {};
document.getElementById("window").style.display = "none";
document.getElementById("but").onclick = showDropDown;
}​
<input id="but" type="button" value="pressMe" />
<div id="window" style="display:none">popup</div>
Demo: http://jsfiddle.net/nazym/
I was trying to make the JavaScript code dynamic using variables instead of the specified elements' names but I could not. It always returns errors. I want to link it with different elements.
update
I want to replace the ids of the elements in the JavaScript code with variables so I can use it with any element.I tried to do it but failed. Basically, I want to use variables instead of the ids of the element and link it to the elements somehow again.

Use arguments instead:
function showDropDown(element, e) {
element.onclick = function() {};
// ....
hideDropDown(element);
}
And you would give the element it's onclick event handler like this:
document.getElementById('but').onclick = function(event) {
showDropDown(this, event);
};
Demo: http://jsfiddle.net/xNSZm/

Change the code to
var showDropdown = function(e) { ... };
document.getElementById("but").onclick = showDropDown;
In other words, store the function in a variable before assigning it.

In your code:
> document.onclick = function(e){
In browsers that support the IE event model, e will be undefined. To accommodate those browsers, you can use:
e = e || window.event;
To find the element that was clicked on, instead of:
> var ele = document.elementFromPoint(e.clientX, e.clientY);
you can do:
var ele = e.target || e.srcElement;
which will work in very many more browsers than elementFromPoint so should be more reliable and faster.

JavaScript event handler to insert new pre tag

I have a set of 3 pre tags that are editable. When someone is on one of the lines and hits 'enter', I want it to insert a new tag below (in the document tree) the one it is on. I have tried to put an event handler on the tags so that this occurs, but the 'onkeypress' doesn't seem to be firing.
<script>
function handlers(){
var pres = document.getElementsByTagName("pre");
for(i=0; i<pres.length;i++){
pres[i].addEventListener("onkeypress", function(e){
if(e.which != 13) return;//the ENTER key
var tag = e.srcElement;
if(tag.nextSibling){
var next = tag.nextSibling;
var newPre = document.createElement('pre');
tag.nextSibling = newPre;
newPre.nextSibling = next;
}
var tree = document.getElementById("tree");
tree.innerHTML = document.getElementByTagName().length;
});
}
}
</script>
<body onload="handlers();">
<div id="editor" contentEditable="true">
<pre>1</pre>
<pre>2</pre>
<pre>3</pre>
</div>
<div>
<p id="tree"></p>
</div>
</body>

You are iterating over the array of elements incorrectly, and you are not attaching event listeners correctly.
I recommend changing your for loop to:
for (var i=0, l=pres.length; i<l; i++) {
pres[i];//This is where the Element is stored
}
You can read up on attaching event listeners here
Additionally, it would appear: http://jsfiddle.net/vZYpX that the source of the keypress event under "contentEditable" is the actual element that is "contentEditable". So you have to either make the <pre>s content editable (and not the div), or attach the listener to the parent div (that is currently contentEditable).

I'm not sure the 'onkeypress' can be fired from 'pre' tag.
However I have a suggestion:
1. Register document.onmousemove to detect mouse position.
2. Register document.onkeypress event and when detecting the 'enter' key, check if the mouse is over a 'pre' tag. If so, run your code.
It should look like this:
function moveMoveHandler(e)
{
var evt = window.event || e;
window.lastMouseX = evt.clientX;
window.lastMouseY = evt.clientY;
}
function keypressHandler(e)
{
var evt = window.event || e;
// handling only 'enter' key
if (evt.keyCode !== 13) return;
// getting the element the mouse is on
var elem = document.elementFromPoint(window.lastMouseX,window.lastMouseY);
var node = elem;
// checking if the found node is a child of a 'pre' node
while (node.nodeName !== "PRE" && node !== document.body)
node = node.parentNode;
if (node.nodeName === "PRE")
{
... INSERT YOUR CODE HERE ...
}
}
// IE
if (window.attachEvent)
{
document.attachEvent("onkeypress", keypressHandler);
document.attachEvent("onmousemove", moveMoveHandler);
}
// other browsers
else
{
document.addEventListener("keypress", keypressHandler, false);
document.addEventListener("mousemove", moveMoveHandler, false);
}