|
JavaScript - Detecting A Keycode For Tab During On Blur
Hi,
I have do a calculation when an user enters the value in the textbox during onblur event. But during the onblur event I need to capture the tabkey (keyCode) and if it is 9 do the calculate else not do that. But the problem is we cannot detect a keyCode for tab in onblur. But for sure I need to use onblur in this case and cannot use onkeydown as this will have impact on the UI screen for this particular scenario. How to go about this? in the textbox I am calling onblur = "test()" Please provide a helping hand. Thanks. Similar Tutorialshi all, when key pressed, in IE i can use this code: event.keyCode=somenumber; and it works. Is this possible in Netscape - Firefox - ..... ? I need to controll the input, I want to allow users to use only keys I want them to use. Thanks I have a 3 textareas that when the user presses the spacebar I would like for the code to execute a TAB to move between them instead. My code works if I make the replacement keycode an number or letter but it wont work if I use TAB. The browser is IE. Thank you for any help you can give. <script type="text/javascript"> function keycode(e) { if(e.keyCode==32) {return (e.keyCode=9);} } </script> </head> <body> <form> <input name="DefectNumber" id="DefectNumber" type="text" onkeypress="return keycode(event);"> <input name="DefectNumber2" id="DefectNumber2" type="text" onkeypress="return keycode(event);"> <input name="DefectNumber3" id="DefectNumber3" type="text" onkeypress="return keycode(event);"> </form> </body> Hey, I must admit I am quite new to it so sorry for bothering. I want to make a photography website where 2 people are featured, and if one of them is "active" the menu will be rearranged and a portfolio and about link appears, so if you go to the portfolio page an extra side menu would appear with the names of those. as well I wanted to be able to view the pictures as plain as possible and add another possibility to this whole thing - To view the pictures I wanted to know if it is possible to 1. use a hotkey e.g. space to hide and or show(not only once to activate something) the menue/div so there is just a plain white site with the picture and caption left 2. to use numbers 0-9 to switch through ones portfolios - here i wanted to be able to use those numbers for both persons- so is it as well possible to use 0-9 if being on person "a" and see its portfolios and if being on person "b" using the same numbers but seing the other persons portfolios? And is it also possible to use the arrow keys (left, right) to browse through the pictures inside the portfolios? I do not expect a solution since it would be too much, just a clue and if it is by anymeans possible? And if javascript is the right way to go? (wouldnt like to try to learn something and find out it was the wrong thing to learn) sorry for this humagous question. I just dont know where to start learning so I need a hint of which way to go. Anyway, thanks p.s. i hope it is at least a bit understandable Hi, I have a requirement to force the pageUp and pageDown keys to function the same as the arrowUp and arrowDown. I believe I'm ok with IE but have issues with setting the value for FireFox ...specifically line: evt.which=38; and line evt.which=40; -the "which" seems to only have a getter- Any advise is appreciated...thanks in advance ;-) Code: try{
if (window.document.addEventListener) {
window.document.addEventListener("keydown", reviseKeyFunctions, false);
}else{
window.document.attachEvent("onkeydown", reviseKeyFunctions);
document.captureEvents(Event.KEYDOWN);
}
}catch(e){}
function reviseKeyFunctions(evtArg) {
//a keycode of 33=pgUp, 34=pgDown, 38=arrowUp, 40=arrowDown
var evt = (document.all?window.event:evtArg);
var keyCodeValue = (document.all?window.event.keyCode:evtArg.which);
//cancel the browser's default key function (if any)
if ((keyCodeValue == 33) || (keyCodeValue == 34)) {
if (evt.keyCode) { //IE
if (keyCodeValue == "112") { //F1 Help Key ... this is not used here,
//...but nice to know
document.onhelp = function() { return (false); }
window.onhelp = function() { return (false); }
}
evt.returnValue = false;
evt.keyCode = 0;
}else{ //not IE
evt.preventDefault();
evt.stopPropagation();
}
}
//alert(keyCodeValue); //turn on to identify a keyboard's keyCode
if (keyCodeValue == 33) {
if (evt.keyCode) {
evt.keyCode=38;
return evt.keyCode;
}else if (evt.which) {
evt.which=38;
return evt.which;
}
}else if (keyCodeValue == 34) {
if (evt.keyCode) {
evt.keyCode=40;
return evt.keyCode;
}else if (evt.which) {
evt.which=40;
return evt.which;
}
}
} //end function reviseKeyFunctions(evtArg)
Greetings, I'm looking to add keycode Accessibility to an html + javascript interaction. It's basically like tic tac toe where a user clicks on a cell (these cells are created by divs) and an 'O' appears in the cell. I'd like to be able to tab through the cell fields and hit the spacebar to put the 'O' in the focused cell. Here's an example of the html divs... [code] <div class="grid"> <div class="row row-1"> <div class="box true"><div class="inner" tabindex="0" id="orange"></div></div> <div class="box true"><div class="inner" tabindex="0" id="orange"></div></div> <div class="box true"><div class="inner" tabindex="0" id="orange"></div></div> <div class="box"><div class="inner" tabindex="0" id="orange"></div></div> <div class="clear"></div> </div> </div> [code] What I'm needing to know is where/what code goes into the .js to set up a keydown event. Here's the .js being used... [code] $(document).ready(function() { // init $('#holder .section:first').addClass('current-slide'); $('#nav .btn:first').addClass('current-slide'); $('#holder .section').addClass('noanswer'); $('#holder .section').delay(300).animate({'top':'0px'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down // end init $('.noanswer .box').hover(function() { if ($(this).hasClass('selected')) { $(this).addClass('box-highlight-hover'); } else { $(this).addClass('box-highlight'); } }, function() { if ($(this).hasClass('selected')) { $(this).removeClass('box-highlight-hover'); } else { $(this).removeClass('box-highlight'); } }); // box functions $('.noanswer .box').live('click',function() { $(this).addClass('selected'); }); $('.noanswer .selected').live('click',function() { $(this).removeClass('selected'); $(this).removeClass('box-highlight-hover'); }); // slide animations $('#nav .mobility-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#mobility').css({'top':'-350px','z-index':'10'}); $('#mobility').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#mobility').addClass('current-slide'); } }); $('#nav .vision-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#vision').css({'top':'-350px','z-index':'10'}); $('#vision').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#vision').addClass('current-slide'); } }); $('#nav .hearing-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#hearing').css({'top':'-350px','z-index':'10'}); $('#hearing').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#hearing').addClass('current-slide'); } }); $('#nav .cognitive-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#cognitive').css({'top':'-350px','z-index':'10'}); $('#cognitive').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#cognitive').addClass('current-slide'); } }); // result $('.answerSubmit').hover(function() { $(this).addClass('answerSubmitHover'); }, function() { $(this).removeClass('answerSubmitHover'); }); $('.answerSubmit').live('click',function() { var parent = $(this).parents('.section'); var scoreParent = $(this).parent('.result'); // Calculate max score var maxScore = parent.find('.box').length; // Calculate actual score var actualScore; var selectednotTrue = 0; var selectedCorrect = 0; var notTrue = 0; actualScore = parent.find('.box').length; selectedCorrect = parent.find('.box.selected.true').length; notTrue = parent.find('.box:not(.true)').length; selectednotTrue = parent.find('.box.selected:not(.true)').length; actualScore = notTrue - selectednotTrue + selectedCorrect; scoreParent.find('.answer').html(actualScore); scoreParent.find('.outOf').html(maxScore); $(this).hide(); parent.find('.score').show(); parent.addClass('answer').removeClass('noanswer'); }); }); [code] Please let me know if I'm unclear or if more code is necessary. Thanks for any help you can give! k Hi, please can someone help I wanted to blur the text in my formfield when a user clicks on it?! Code: <script language="javascript">
function cbevent()
{
var xx = document.loginform.myusername.blur();
}
</script>
<form name="loginform">
<input type="text" name="myusername" onMouseClick="cbevent()" value="Enter your email address here" />
Hi all, A piece of code I have been working on has a small issue with bluring off a div and I can't working out why. Basically what I do is append divs to the DOM and on double click I make them editable and when I blur they are none editable and I append a new div into the document. I have quickly knock up a small piece of code to illustrate the problem ... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style text="text/css">
.dropArea {
color:#757575;
font-weight:bold;
display:block;
margin:0px;
border: 1px dashed #999999;
background-color:#DDDDDD;
left:10px;
right:10px;
/*width:auto;*/
text-align:center;
line-height:20px;
}
.textEditArea {
display:block;
margin-bottom:10px;
border: 1px dashed #999999;
background-color:inherit;
left:10px;
right:10px;
padding:5px;
width:auto;
}
</style>
<script>
function makeEditable(activeZone) {
if (activeZone.className == "dropArea") {
activeZone.innerHTML = "";
}
activeZone.contentEditable = true;
activeZone.className = "textEditArea";
}
function doneEditing(activeZone) {
// if no HTML added, make it a drop zone
if (trim(activeZone.innerHTML) == "") {
activeZone.className = "dropArea";
activeZone.innerHTML = "Drop items from or double click to add text";
} else if (activeZone.addDropZoneAlready == undefined) {
// add a new drop zone underneath
activeZone.title = "Double click to edit text";
activeZone.addDropZoneAlready = "true";
activeZone.zoneType = "textDisplay";
addNewDropZone();
}
activeZone.contentEditable = false;
}
function addNewDropZone() {
var dropArea = document.createElement("div");
dropArea.className = "dropArea";
var appendTo = document.body;
appendTo.appendChild(dropArea);
dropArea.ondblclick = function () { makeEditable(dropArea); };
dropArea.onblur = function () { alert('done'); doneEditing(dropArea); };
dropArea.innerHTML = "Drop items or double click to add text";
}
</script>
</head>
<body onload="addNewDropZone();">
<div onDblClick="this.contentEditable=true;" onBlur="this.contentEditable=false;alert('Done!');" style="background-color:#C0C0C0; width: 500px; height:200px;"></div>
</body>
</html>
The div in the body already works as expected, it alerts "Done!" however divs I append into the document have to blur twice before the onblur fires? I just don't undestand why its doing it. Anybody have any ideas as to what is happening? Thanks, Dale I have been working on this code for days and I cannot get it right!!! Can anyone please give me any pointers. It should have an error message that pops up on same line as text boxes when into is not entered property! Thanks in advance! NewBanks <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function validate(){ var errorList = new Array(); var eMail = document.getElementById("email").value; var passwrd = document.getElementById("password").value; var cPassword = document.getElementById("confirmPassword").value; var secQuest = document.getElementById("securityQuestion").value; var secAns = document.getElementById("securityAnswer").value; var regEx = /^\s*[\w\\+_]+(\.[\w\\+_]+)*\@[\w\\+_]+\.[\w\\+_]+(\.[\w\\+_]+)*\s*$/; if(!regEx.test(eMail)){ errorList[errorList.length] = ("You must enter a valid email address!<br/>"); valid = false; } if(passwrd == "" || passwrd.length <6){ errorList[errorList.length] = ("Your password must be 6 characters long! <br/>"); valid = false; } if(passwrd != cPassword){ errorList[errorList.length] = ("Passwords do not match! <br/>"); valid = false; } if (secAns == ""){ errorList[errorList.length] = ("Please enter your Security Answer! <br/>"); valid = false; } if(errorList.length > 0){ for(var i = 0; i < errorList.length; i++){ document.getElementById("errors").innerHTML += errorList[i]; } return false; } else return true; window.onload = function() { 0(); } } </script> </head> <body> <form id="login" action="confirm.html"method="get" onsubmit="return validate();"/> Email: <input type="text" name="email" id="email" onblur="validate(this);" /> <br/><span id = "Invalid Email"></span> Password: <input type="text" name="password" id="password" onblur="validate(this);" /> <br/><span id = "Incorrect Password"></span> Confirm Password: <input type="text" name="password" id="confirmPassword" onblur="validate(this);" /> <br/><span id = "Invalid password"></span> Security Question: <select id = "securityQuestion" onblur="validate(this);"> <option value= "maiden" >What is your mother's maiden name </option> <option value= "animal"> What is your favorite animal </option> </select> <br/> <input type="text" name="securityAnswer" id="securityAnswer" onblur="validate(this);" /> <br/><span id = "Security Answer does not match"></span> <p><input type = "Submit" /></p> <span id = "errors"> </span> </form> </body> </html> Hi guys, I have the following code that should hide the dropdown part of a select box when clicked (don't ask why, this is part of a separate project). Please see a simple example below: Code: <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<select name="select1" id="select1" onfocus="$(this).blur();">
<option value=""></option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
This all works fine in IE and FF but in chrome the options are still shown after clicking the element. I've been racking my brains for hours on this and, no matter what method I use, I can't get this to work correctly in Chrome. Can anyone suggest a way I can get this to work? Thanks in advance! I have these "editable" divs in my document. When you click them, a text box comes up and you type something and push enter. It changes what's in the div. There is also a blur event associated with the text box. When the user tabs or clicks away, it fires the blur event. Here lies the problem. I have other elements on the page that are clickable. I don't want those clickable things to fire their events if the user is clicking away from the text box, ie. the blur event. This isn't a problem is the user pushes tab, for instance. So my thought was that if i know how the user blurred (via keyboard, or clicking) i could take the appropriate action. Any ideas? I have a JavaScript that remembers the values of a form by creating cookies for each input element onblur. I cannot figure out though how to exclude one input field from being remember. It would be document.getElementsByTagName('input')[15] Every time I try to add an if/else statement in using that line, the script doesn't work altogether. Code: window.onload = function() {
rememberFormInputs('rma', 'input-');
}
/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date(today.getTime() + (expires));
document.cookie = name+"="+escape(value) +
((expires) ? ";expires="+expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}
/**
* Get a cookie value
* @param string cookie name
*/
function getCookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}
/**
* Remebers form inputs after you fill them in
* @param string form id to remember fields
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)
*/
function rememberFormInputs(form_id, prefix) {
var form = document.getElementById(form_id);
var els = document.getElementsByTagName('input');
for (var i = 0; i < els.length; i++) {
var el = els.item(i);
if (el.type == 'text') {
el.onblur = function() {
var name = this.name;
var value = this.value;
setCookie(prefix + name, value, 90);
};
var old_value = getCookie(prefix + el.name);
if (old_value && old_value != '') {
el.value = old_value;
}
}
}
}
Does anyone have a solution? I would really appreciate it :] Hi I'm banging my head against this problem and I'd really appreciate some help. I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus. A simplified version of my problem is: I've defined the function Code: function two_focus()
{
document.getElementById("two").blur();
alert("hello");
}
then in the body I have the form with two text boxes Code: <input id="one" type="text"><input id="two" type="text" onfocus="two_focus();"> When the page is loaded and I click in the second textbox I get the alert, all well and good. I OK the alert box, but when I click on box 1, or anywhere on the page for that matter, the function is called and the alert comes up. I just don't understand why the focus is being returned to the second box when I click anywhere in the browser window. Any comments will be gratefully received. Hi guys, i would like a script that detects if quicktime is installed like this one here http://developer.apple.com/internet/...lplugins.shtml but i want it to offer the link to quicktime if not installed, and continue to load the player if quicktime is installed. Im thinking something like this.. Code:
<script type="text/javascript"
src="http://developer.apple.com/internet/webcontent/examples/detectallplugins.shtml "></script>
<script>
if (detectQuickTime == true) {
setTimeout('Redirect()',0);
}
else
{
setTimeout('Redirect2()',0);
}
function Redirect()
{
location.href = 'http://www.mysite.com/player.htm';
}
function Redirect2()
{
location.href = 'http://www.mysite.com/error-install-quicktime.htm';
}
</script>
But i cant make it work. Can anyone help? Is it possible to detect keystrokes on the keyboard? I want to detect the arrow keys in particular. I'm going through the online reference links in the sticky now, great resource! I have an html page that contains a div that has overflow:auto. Is there a way to detect if the scrollbar is displayed on the div? If the scrollbar is present then I want a message to be displayed inside another div. If there is no scrollbar then I don't want any message to appear. Thanks I want to detect the double-press of the space key. However, I want a single press of a space key to have a different function. The double-tap of space should only count if the taps of space are no more than, say, a half second apart. For example: The user hits space once, and javascript begins performing one action. 1/3rd of a second later, they hit the space bar again, and since that is within our threshold of 1/2 of a second, the action that began because the user hit the spacebar once should be cancelled, or undone (which I can write later) and the action when the user hits the spacebar twice should begin. Anyone have an idea how to do this? Thanks! Hi, Wondering if anyone can help me out with some javascript. How do I check upon clicking a random object on the page that the object onmousedown is an image or not? Any help is much appreciated. -cantonboi My credit card processing service will only accept English characters. I need to detect entries in the form that are using non English characters. Is there a way in Javascript to create a function to force a string to UTF-8? My idea is to do something like function forceUTF8(X){ Y = ???? X; return Y; } if ( stringA != forceUTF8(stringA) alert ("You must use English Characters"); I am trying to detect the parent URL on a page for a Facebook application so that if the user is on my site rather than accessing the application via Facebook they will be redirected to the FB App page. In PHP I can use: if(strstr($parenturl,"mysite.com")){header("location:fbapp.com");exit;} Is it possible to do this in JS also? Because with FB Apps the URL is not always the same so instead of detecting a full URL I just want to search for my domain name within document.location.href to see if it exists and IF yes > Redirect back to FB. Hello there, This seems to be a bit of a sore topic on the forums but at least I think I have good reason for wanting to do it - I've written a script that displays tooltips when your mouse hovers over a link - all this is fine, but when I click on the link and move to another page, then click the back button on the browser to go back, the tooltip for the link I clicked is still visible! It'd be great if there was a way of detecting the button had been pressed so that I can hide it... p.s. I tried onclick = "tooltips.hideToolTip(4); return true;" for the links but no joy... Many thanks Edd |
|||||||