|
JavaScript - Detect The Source Of A Blur Event
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? Similar Tutorialshi to all i need an event based calender using open source how can i create is there any free open source event based calender is there user need to boook and block his dates and edit and book the dates for his requirements please suggest me regards kiran recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source." this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before? 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, 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. 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! Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end. In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content. Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code: (function() {
var as,ae;
as = document.getElementsByTagName("img");
for (var i = 0; i < as.length; i++) {
ae = as[i];
ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail");
}
})();
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 forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? 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. I really want to learn a way determine whether custom fonts via @font-face got downloaded by the client machine and then set styles differently depending on whether they got the fonts or not. To start I could run a fonts-inactive.css file to setup the styles to look nice without custom-fonts (this is the base style which should look fine without any JS, flash, custom fonts, etc.). Then run a JS that will run the font-face-rules.css (which attempts to load the fonts via @font-face css rules) - this way if JS isn't active then no fonts will be loaded and the document will default to its fonts-inactive.css. If the JS does run then font-face-rules.css will try to send the fonts. So the JS needs to somehow determine whether the fonts worked or not. If the fonts worked then the JS would run the fonts-active.css which would alter some style rules to make the page look better with the custom fonts (since we know they got the fonts we can tweak the page a little to look better with them). If the fonts didn't work then the JS needs to not run the fonts-active.css and instead just exit out leaving the document with its original, unaltered rules from fonts-inactive.css. (since we know they didn't get the fonts we leave them with the baseline stylesheet which optimizes the appearance for default fonts). Sadly I don't know the first thing about Javascript so I am hoping that you guys might be able to help me come up with something that works. Cheers, line hey all is there a code where I can detect if the browser is IE6 or IE7 and send them to another webpage? my current design is not compatible with IE6 or 7 and i want to make a new page that's compatible. thanks! im totally new to javascript and i would like to know how i can make my internet page detect the resolution of someone's computer and on base of that use different 'html pages' so that the background fits etc.
I am attempting to make an page on my website where visitors can set my website as their homepage. I am trying to make my website read which browser my visitors are using and then redirects them to the page for the right browser where I can tell them how they can set my website as their homepage. Basically I need exactly the same thing as THIS. Could you explain to me in plain English how I can realize this. This is what I know have: Code: <table width="759" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<td width="378" height="28" align="right">Selecteer jouw browser </td>
<td width="16"></td>
<td width="365" align="left"><form id="browserSelection" name="browserSelection" action="customizeBrowser" method="GET"><select name="browser" size="1" id="browser" onchange="document.browserSelection.submit();"><option value="ff" selected>Firefox</option><option value="ie">Internet Explorer</option><option value="chrome">Chrome</option><option value="opera">Opera</option><option value="safari">Safari</option></select></form></td>
</tr>
</table>
________________________________________ Please tell me if I make any English mistakes in my posts. I am trying to write as perfectly possible. I have been searching for a way to accomplish a unique task for a while. Here's the situation: We have several users who are in locations where YouTube is blocked for various reasons. On our homepage we would like to embed a YouTube video except for when YouTube is blocked and then embed an alternative video that is hosted off one of our servers. Is there a way to use JavaScript to detect whether or not YouTube is available and then put in the correct video? Thanks in advance! Hi all,i'm wondering how to detect select option changes.For example i want the data in database changed when i click on update button and if there are changes on the select option side.If the values on the select option are not changed,i can't update the data..Is there a way to achieve it?Thanks a lot...
i have a problem. i want to check that whether an element with a specific id exist on page or not. example Code:
<script type="text/javascript">
function bgcolo()
{
if(document.getElementById("jj") == null)
{
return red;
}
else
{
return green;
}
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="oo" bgcolor="return bgcolo();">bvbv</td>
</tr>
</table>
<div id="jj">fggftrytyyyyyyyyy</div>
</body><
|
|||||||