Disable Backspace - javascript

I want to disable the Backspace button any time I click the browser page. I have written this piece of code (the second if is making sure that this would work for any version of IE - 11 or lower):
<PUBLIC:COMPONENT TAGNAME="menucontrol">
<PUBLIC:ATTACH EVENT="onclick" FOR="document" ONEVENT="RemoveBackspace();"/>
<SCRIPT language="javascript">
function RemoveBackspace() {
document.onkeydown = function (){
if(event.keyCode === 8) {
if(typeof event.preventDefault === 'function'){
event.preventDefault();
}
else{
event.returnValue = false;
}
}
};
}
</SCRIPT>
...
</PUBLIC:COMPONENT>
If I introduce an alert function in the RemoveBackspace() function, the message appears. I don't know what's wrong with this code. Should I use a different approach?

You forgot to pass the event to the function.
document.onkeydown = function (event){
if(event.keyCode === 8) {
event.preventDefault();
}
};
Look at the first line of my code. I also removed the unnecessary second if/else statement, as the code works fine without it. Don't worry, everyone makes mistakes like this at first. :P

Related

Javascript keydown doesn't work in separate file

I have this code:
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
var keyCode = e.keyCode;
if(keyCode==13) {
alert("You hit the enter key.");
} else {
alert("Oh no you didn't.");
}
}
if i paste it in the template it works fine, but if i put it in external file, it doesnt work. Although all other javascript in the external file works fine.I have also tried with this code:
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed" );
return false;
}
});
but the same story. What am i doint wrong?
Seems like this answer covers your problem.
Shortly: it matters which moment you add eventListener to the document.
It should be applied on windows.onload

Function persists once called, even after going through if statement test

We have multiple spans inside of a div. We want spans to revert to the original layout when user clicks white space. This is the code:
var whiteSpace = function (){
$(function(){
$('div').on('click',function(e) {
if (e.target !== this)
return;
originalL();
});
});
};
The problem is we have two modes, work mode and set mode, and we want this to only work in the work mode. We change modes with keypress,
$(document).on("keypress", function (e){
if(e.which === 83) {
alert('"Shift + s" was pressed. Start Setup Mode.');
state = "false";
dragResize();
var whiteSpaceDisable = function (){
$(function(){
$('div').off('click',function(e) {
if (e.target !== this)
return;
originalL();
});
});
};
whiteSpaceDisable();
}
if(e.which === 87) {
alert('"Shift + w" was pressed. Start Work Mode.');
state = "true";
dragDropWidget ();
dragResizeDisable();
whiteSpace = function (){
$(function(){
$('div').on('click',function(e) {
if (e.target !== this)
return;
originalL();
});
});
};
whiteSpace();
}
});
When user tries to go to the set mode from the work mode first time, it works. However, when user tries to the same thing second time, it doesn't work. WhiteSpace function persists.
How can we turn this function off in the set mode? By the way, page reload is not an option.Thank you very much!
In your keypress handler, replace:
var whiteSpace = ...
with:
whiteSpace = ...
Right now you're just assigning the other function to a new whiteSpace variable that is scoped to that keypress handler function. If you want to override the previously defined whiteSpace variable, you need to make sure you're actually assigning to that same variable reference, not creating a new one.
Problem solved by placing 'if conditional' inside the originalL function, so it will evaluate before firing. this was the problem.
We just made a 'workMode' variable that can be set to whatever value we need through keypress function. Here's the code that fixed it:
var workMode = "off";
function originalL() {
if (workMode === "on"){
small1O();
small2O();
smalllongO();
smallwideO();
}
};
and at bottom of page, at the keystroke listeners, putting this:
$(document).on("keypress", function (e) {
if (e.which === 83) {
alert('"Shift + s" was pressed. Start Setup Mode.');
workMode = "off";
dragResize();
originalL();
}
;
if (e.which === 87) {
alert('"Shift + w" was pressed. Start Work Mode.');
workMode = "on";
smalllongExpand();
originalL();
dragResizeDisable();
}

After preventing the default behavior the enter key seems to be refreshing the global variables in java script

I am writing a search function much like the [cmd+f] function in a browser. I have everything working but I want the enter key on press to cycle through the results through the page. I also have arrow buttons that call the function I wrote and they work. I prevented the default behavior of enter using:
$('form').keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
I am using this code to call the function on enter:
$('form').keyup(function (event) {
if (event.keyCode == 13) {
nextSearch();
}
});
It works for the first result but I think it resets the global variable I use to mark the place. The only logical answer I can think of is that pressing enter now refreshes the JavaScript. Is there a way to prevent this?
I use these global variables to keep track:
window.luCurrentNumber = 0;
window.luLastActive = 0;
If I understand you corrected, you the arrow keys and the enter keys to tab instead of performing their default. Here is an example of a function that I use to treat the Enter key as a tab, which I wrote because users kept hitting the enter key and accidentally submitting the page.
//Make enter key is pressed, tab instead of submitting.
$('body').on('keydown', 'input, select', function (e) {
var self = $(this)
, form = self.parents('form:eq(0)')
, focusable
, next
;
if (e.keyCode == 13) {
focusable = form.find('input,a,select,button').filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
Though it's not exactly what you are trying to do, I think it should set you on the right path.

Javascript IFrame/designmode and onkeydown event question

Apologize if this is answered already. Went through some of the related questions and google, but ultimately failed to see why this isn't working.
My code is as follows
<iframe id="editor"></iframe>
editorWindow = document.getElementById('editor').contentWindow;
isCtrlDown = false;
function loadEditor()
{
editorWindow.document.designMode = "on";
editorWindow.document.onkeyup = function(e) {
if (e.which == 91) isCtrlDown = false;
}
editorWindow.document.onkeydown = handleKeyDown;
}
function handleKeyDown(e)
{
if (e.which == 91) isCtrlDown = true;
if (e.which == 66 && isCtrlDown) editFont('bold');
if (e.which == 73 && isCtrlDown) editFont('italic');
}
function editFont(a,b)
{
editorWindow.document.execCommand(a,false,b);
editorWindow.focus();
}
This code works perfectly in Chrome, but the keyboard shortcuts do not work in Firefox. In fact, in Firefox it does not seem to register the events for keyup/keydown at all.
Am I doing something grossly wrong here that is mucking up Firefox?
For editable documents, you need to use addEventListener to attach key events rather than DOM0 event handler properties:
editorWindow.document.addEventListener("keydown", handleKeyDown, false);
If you care about IE 6-8, you will need to test for the existence addEventListener and add the attachEvent equivalent if it is missing.
Try using:
editorWindow = document.getElementById('editor').frameElement;
I'm not sure this will solve the issue, it may also be:
editorWindow = document.getElementById('editor').contentDocument;
Or even possibly:
editorWindow = document.getElementById('editor').frameElement.contentDocument;
One thing you can do is put the entire string in a try statement to catch any errors and see if the content is being grabbed from within the iframe.
try { editorWindow = document.getElementById('editor').contentWindow; } catch(e) { alert(e) };
The only other thought I have is that you're typing into a textbox which is within an iframe, and you may possibly have to add the onkeydown event to that specific item, such as:
var editorWindow = document.getElementById('editor').contentDocument;
var textbox = editorWindow.getElementById('my_textbox');
function loadEditor()
{
editorWindow.document.designMode = "on";
textbox.onkeydown = function(e) {
alert('hello there');
}
}
I hope one of these is the solution. I often find when it comes to cross-platform functionality it often boils down to a little trial and error.
Good Luck!

how to re-enable default after doing event.preventDefault()

I know this exact question was asked here, but the answer didn't work for what I needed to do so I figured I'd give some example code and explain a bit...
$(document).keypress(
function (event) {
// Pressing Up or Right: Advance to next video
if (event.keyCode == 40 || event.keyCode == 39) {
event.preventDefault();
$(".current").next().click();
}
// Pressing Down or Left: Back to previous video
else if (event.keyCode == 38 || event.keyCode == 37) {
event.preventDefault();
$(".current").prev().click();
}
}
);
It basically disables the arrow keys to use them for something else, but doing:
$(document).keypress(function () { });
doesn't enable the default function again... I need it to scroll the page without having to create a scroll function for it...
Any ideas?
Thanks,
Matt
Adding a new handler doesn't replace the previous one, it adds a new one. You may be looking for jQuery#unbind if you're trying to remove the previous handler, but if you're going to be turning this on and off a lot, you probably would be better off with a flag telling you whether to prevent the default or not in your existing handler.
Adding, and later removing, a handler looks like this:
function keypressHandler() { /* ... */};
$('#thingy').keypress(keypressHandler);
// ...elsewhere...
$('#thingy').unbind('keypress', keypressHandler);
I'm not sure this is the right way to handle it.
A better way to approach this problem would be to put some kind of check inside your document.keypress instructions.. like..
var enableKeys = false;
$(document).keypress(
function (event) {
// Pressing Up or Right: Advance to next video
if (event.keyCode == 40 || event.keyCode == 39 && enableKeys) {
event.preventDefault();
$(".current").next().click();
}
// Pressing Down or Left: Back to previous video
else if (event.keyCode == 38 || event.keyCode == 37 && enableKeys) {
event.preventDefault();
$(".current").prev().click();
}
}
);
Then control the enablekeys wherever you feel necessary, either with a hover, or something along those lines.
function(e){ e.preventDefault(); }
and its opposite
function(e){ return true; }
Why not just wrap a condition around event.preventDefault(); in your current code?
Try to unbind the keypress event from document.
I don't know of any other ways to do it.
HTH

Categories