|
JavaScript - Body Onfocus=functionname, Not Working On Ie
Hi, I'm working on a website and am having difficulty figuring out how to have a function triggered when the window becomes active. I am having limited success with:
<body onFocus=myFunction();> This works fine with Firefox and Safari, but not Internet Explorer. Is there a way to achieve this in all 3 browsers? Thanks. Similar TutorialsHi all, I have a REALLY strange problem - maybe a new set of eyes can help me. Look at these pieces of code: This generates the code Code: <!-- BEGIN code_open -->
<dl class="codebox">
<dt>{L_CODE}:
<a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">{L_SELECT_ALL_CODE}</a>
</dt>
<dd>
<pre onfocus="doTest(this)">
<!-- END code_open -->
<!-- BEGIN code_close -->
</pre>
</dd>
</dl>
<!-- END code_close -->
Test JS just for now Code: var doTest = function(a) {
alert(a);
}
The HTML as seen by Firebug Code: <dt>Code: <a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">Select all</a></dt><dd> <pre onfocus="doTest(this)"> Test Test Test </code></pre></dd> One little problem... it doesn't work!!! And yes the function being called is accessible. For that matter, simply putting "alert('hello')" into the "onfocus" also fails. I even checked at W3CSchools to verify that: (1) The <pre> element supports "onfocus" (it does). (2) I ran their "Try it" and "onfocus" is working in my browser (Firefox 3.6.17, WinXP 32). What the heck??????????? Any ideas? Thanks! -- Roger I am very new to learning JavaScript and I already seem to have come across a problem. I can get Scripts to work fine in the <body> but not all scripts seem to work in the <head> For example, this works fine: Code: <html>
<body>
<p id="date"></p>
<script type="text/javascript">
<!--
document.getElementById('date').innerHTML = Date();
//-->
</script>
</body>
</html>
However, it won't work if I place the script in the head like this: Code: <html>
<head>
<script type="text/javascript">
<!--
document.getElementById('date').innerHTML = Date();
//-->
</script>
</head>
<body>
<p id="date"></p>
</body>
</html>
It could just be that I broke one of the fundamental laws of coding that I don't know or something but like I said, I've only just started JavaScript. Also, the tutorial I have isn't to clear on the differences between using the <head> or the <body>. Just kinda says you can do both. I'd like to use the <head> wherever possible because it would be so much neater to keep all the JavaScript in one place and all the HTML in another. Pretty much like you can do with CSS. Anyway, I'd be much grateful if somebody can explain this to me. Hello The onFocus events I have come across seem to deal with changing the background colour of the field on a Web form, so that the active field is a different colour to the background field of the other form elements. But how would I use onFocus simply to have the cursor moving in the active field (on a Web form it might be the 'name' field for example)? The code I have at the moment looks like this: Code: <!DOCTYPE etc
<head>
<title>Janko</title>
<style type="text/css">
body
{
font-family: Arial, Sans-Serif;
font-size: 13px;
}
#inputArea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
background-color: #d6e5f4;
padding: 10px;
width:310px;
}
#inputArea input, #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
width: 300px;
}
.activeField
{
background-image: none;
background-color: #ffffff;
border: solid 1px #33677F;
}
.idle
{
border: solid 1px #85b1de;
background-image: url( 'blue_bg.png' );
background-repeat: repeat-x;
background-position: top;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input, textarea").addClass("idle");
$("input, textarea").focus(function(){
$(this).addClass("activeField").removeClass("idle");
}).blur(function(){
$(this).removeClass("activeField").addClass("idle");
});
});
</script>
</head>
<body>
<h2><a href="www.jankoatwarpspeed.com">Janko At Warp Speed</a></h2>
<p>This example is from the article <a href="http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx">Enhance your input fields with simple CSS tricks</a></p>
<div id="inputArea">
<label for="txtName">
Name</label>
<input id="Text16" type="text" />
<label for="txtEmail">
Email</label>
<input id="Text17" type="text" />
<label for="txtWebsite">
Subject</label>
<input id="Text18" type="text" />
<label for="txtComment">
Message</label>
<textarea id="Textarea6" rows="4" cols="30"></textarea></div>
</body>
</html>
Many thanks Steve Hi, can someone show me why I cant get the onfocus and onblur to loop thru the function showTextContent() when entering the words one, two, three or four. I have tried for days, googled and lost a lot of hair trying to figure it out. http://www.data-affiliates.com/DL234...5/attempt.html Code: <html>
<!-- Created on: 08.08.2009 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="sdfgdfg">
<meta name="generator" content="AceHTML 6 Pro">
<link rel="stylesheet" href="vid61.css" type="text/css" media="screen" />
<script type="text/javascript">
function toggle(id, status){
document.getElementById(id).style.visibility = status;
}
function myFocus(element)
{
if (element.value == element.defaultValue) {
element.value = '';
}
}
function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
function populateSearchField(){
var specialChars = "\\.+*?[^]$(){}=!<>|:,-=/";
var ignoreList = ["a", "the"];
var i, j, searchFld, keywords;
if (!(searchFld = document.getElementsByName('formcontent')[0])) return;
if (!(keywords = document.referrer.match(/[pq]=(.*?)&/))) return;
var preg_quote = function(str){return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!<>\|\:])/g, "\\$1");}
keywords = decodeURIComponent(keywords[1]).replace(new RegExp('[' + preg_quote(specialChars) + ']', 'g'), ' ').split(/[\+ ]/);
for (i = 0; i < keywords.length; i++){
for (j = 0; j < ignoreList.length; j++) if (!keywords[i] || (keywords[i] == ignoreList[j])) {
keywords.splice(i--, 1);
break;
}
}
searchFld.value = keywords.join(' ');
}
function keywordMatch(keywords, text) {
var result = 0;
for (var i in keywords) {
if (text.match(new RegExp("(^| )" + keywords[i] + "( |$)", "i"))) {
result++;
};
}
return result;
}
function showTextContent() {
var i, matches = [];
var div, divcontent, divs = document.getElementById("ts-1").getElementsByTagName('div');
var keywords = document.getElementsByName('formcontent')[0].value.split(' ');
for (i = 0; i < divs.length; i++) {
div = divs[i];
divcontent = div.lastChild.nodeValue;
if (keywordMatch(keywords, divcontent)) {
matches.push(div);
}
}
if (matches[0]) {
document.getElementById('take1000').innerHTML = matches.length + " matches / Treffer";
for (i = 0; i < matches.length; i++) {
matches[i].onmouseover(toggle('take1000', 'visible'));
matches[i].onmouseout = null;
}
}
else {
document.getElementById("ts-1").innerHTML = "" ;
matches[i].onmouseover(toggle('notake1000', 'visible'));
}
}
window.onload = function(){
populateSearchField();
showTextContent();
}
</script>
</head>
<body>
<div id="container">
<div id="notake1000">Keine Ergebnisse / No Matches</div>
<div id="take1000"></div>
<div id="ulent">Search this site / Diese Seite durchsuchen :</div><form><input type="text" name="formcontent" value="one" onmouseover="toggle('notake1000', 'hidden');toggle('take1000', 'hidden');" onfocus="myFocus(this); showTextContent();" onblur="myBlur(this); showTextContent();" style="font-family:Arial;color:#ffff40;text-align:center;font-size:12px;font-weight:bold;float:right;margin-left : auto;margin-right : 2px;border: 2px double #AFAFAF;background-color: #5F5F5F;padding:1px;height:18px;width:293px;" /></form>
<div id="ts-1" style="visibility:hidden;">
<div onmouseover="toggle('fo-test1', 'visible');" onmouseout="this.className='ts-1-1';toggle('fo-test1', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-1"><object id="fo-test1" style="visibility:hidden;" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />one</div>
<div onmouseover="toggle('fo-test2', 'visible');" onmouseout="this.className='ts-1-2';toggle('fo-test2', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-2"><object id="fo-test2" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />two</div>
<div onmouseover="toggle('fo-test3', 'visible');" onmouseout="this.className='ts-1-3';toggle('fo-test3', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-3"><object id="fo-test3" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />three</div>
<div onmouseover="toggle('fo-test4', 'visible');" onmouseout="this.className='ts-1-4';toggle('fo-test4', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-4"><object id="fo-test4" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />four</div>
</div>
</div>
</body>
</html>
greetings, i have a function that sets the onfocus and onblur event for every item in a table which then tells it to the change the class name. for some reason this doesn't seem to be working with the <select> inputs. i have heard it has something to do with how the option list re-loads itself??? Code: function setTableActivation(){
tableDiv = document.getElementById("tables");
tables = tableDiv.getElementsByTagName("table");
count = tables.length;
for(var h=0;h<count;h++){
var table = tables[h];
table.accessKey = h;
table.onfocus = function(){tables[this.accessKey].className = "activeTable";};
table.onblur = function(){tables[this.accessKey].className = "searchreal";};
for(var i=0;i<table.rows.length;i++){
row = table.rows[i];
row.accessKey = h;
row.onfocus = function(){tables[this.accessKey].className = "activeTable";};
row.onblur = function(){tables[this.accessKey].className = "searchreal";};
for(var j=0;j<table.rows[i].cells.length;j++){
cell = table.rows[i].cells[j];
cell.accessKey = h;
cell.onfocus = function(){tables[this.accessKey].className = "activeTable";};
cell.onblur = function(){tables[this.accessKey].className = "searchreal";};
for (var k = 0; k < cell.childNodes.length; k++) {
if (cell.childNodes[k].nodeType == document.ELEMENT_NODE) {
cell.childNodes[k].accessKey = h;
cell.childNodes[k].onfocus = function(){tables[this.accessKey].className = "activeTable";};
cell.childNodes[k].onblur = function(){tables[this.accessKey].className = "searchreal";};
if(cell.childNodes[k].tagName == "SELECT"){
}
}
}
}
}
}
}
Hey all, I'm trying to write what I thought to begin with would be a simple script. All it will do is go out and find every textarea, then change the onblur/onfocus functions to something that I created. Here's my problem, when I am going through each textarea object, I can't seem to find a way to reference the object from within the function. See down in that for loop? When I say tAreaSniffer(i), the i ends up being overwritten each time. This makes the value of i in each object to be 3(since there are 3 textareas). I have used javascript in the past, however now I am getting back into it and having trouble. Thanks guys, Here's my code: Code: <html>
<head>
</head>
<body>
<form>
<textarea name="t1" rows="4" cols="20"></textarea>
<textarea name="t2" rows="4" cols="20"></textarea>
<textarea name="t3" rows="4" cols="20"></textarea>
</form>
<script type="text/javascript">
var sniffer;
var textareas = document.getElementsByTagName('textarea');
var counter = 0;
function tAreaSniffer(tArea)//, oldCont)
{
alert(tArea);
//var curCont; = tArea.value;
counter++;
sniffer = setTimeout(function(){tAreaSniffer(tArea)}, 1000);
}
for(var i=0; i<textareas.length; i++)
{
textareas[i].onfocus = function(){tAreaSniffer(i);};//, textareas[i].value);};
textareas[i].onblur = function(){clearTimeout(sniffer);};
}
alert("HEYO");
</script>
</body>
</html>
I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me. Code: <script type='text/javascript'>
function resizeIt()
{
document.getElementById('comment').style.height = 50px;
};
</script>
<input type='text' id='comment' class='urlTextArea' name='url' value=''
size='75' onfocus='resizeIt()'>
Realizing that form input placeholders aren't universally recognized among browsers, I began changing all of mine using onblur and onfocus handlers instead. As an example, I used the following code, which works in most cases: Code: <input type="text" name="example" maxlength="5" value="Example" onblur="if(this.value=='') this.value='Example';" onfocus="if(this.value=='Example') this.value='';"/> At first, I coded all of the inputs without a value attribute. But, when the page initially loaded, the fields would load empty, and the value/placeholder wouldn't appear until the field had been "focused" and then "blurred" again. Adding the value attribute seemed to correct that problem, again, for the most part. I have some text fields that appear only after I select a particular radio button or select option. Problem is, when the radio is clicked, the field appears, but even with the value attribute in place, the field appears void. I'm not sure what is different, or what I'm doing wrong. Here's the javascript code with the radio button (note:everything works except that the "placeholder" doesn't show when the field first appears): Code: function showfield() {
document.forms[0].otherRelation.value = "";
document.getElementById("newBox").style.display = "none";
var r = document.forms[0].relation;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[i].checked && r[i].value == "Otherrelation" ) {
document.getElementById("newBox").style.display = "inline";
}
}
}
<input type="radio" name="relation" value="Otherrelation" onclick="showfield()"/>Other
<span id = "newBox" style="display:none">:
<input type = "text" name="otherRelation" size="35" value="Your Relationship" onblur="if(this.value=='') this.value='Your Relationship';" onfocus="if(this.value=='Your Relationship') this.value='';"/>
</span>
Thanks for any help. Sorry so long. Hi all, I am working on a site which is in a frameset. There is content area, a footer and a workqueue on the right. Now what I do is poll the workqueue every 30 seconds, check if there are any changes to any queues and if so, I make them go bold and red and play a beep. That's no problem, that works fine. The trouble is I am trying to make the title flash "New Item" if the window is out of focus (Minimised would be better but dont think that is possible to detect). The flashing bit is no problem, it's the triggering when the windows out of focus that is a problem. Applying events to the window object doesn't work. The closest I have come to making it work is this, but it doesn't work in firefox... Code: var debugwin = window.open("", "newwin", "width=300, height=300, scrollbars=1");
debugwin.document.open();
debugwin.document.write("<HTML><TITLE>Debug Window</TITLE><BODY>");
debugwin.document.write("</BODY></HTML>");
debugwin.document.close();
function addDebug(msg) {
debugwin.document.body.innerHTML = msg + "<BR/>" + debugwin.document.body.innerHTML;
}
<!--<frameset onblur="workitemAlerts.setItemAlerts(false);" onfocus="workitemAlerts.setItemAlerts(true);" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">-->
<frameset onblur="addDebug('Blur 1st frameset');" onfocus="addDebug('Focus 1st frameset');" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">
<frame onblur="addDebug('Blur frame 1');" onfocus="addDebug('Focus frame 1');" noresize scrolling="no" framespacing="0" border="0" frameborder="0" id="titlebar" name="titlebar" src="<wfmt:headerpage />">
<frameset onblur="addDebug('Blur 2nd frameset');" onfocus="addDebug('Focus 2nd frameset');" id="mainframeset" cols="10,*,<%= MAIN_FRAME_RESTORED %>" framespacing="0" border="0" frameborder="0">
<frame onblur="addDebug('Blur frame 2');" onfocus="addDebug('Focus frame 2');" noresize framespacing="0" border="0" frameborder="0" name="leftpad" src="mainColourFill.jsp" scrolling="no">
<frame onblur="addDebug('Blur frame 3');" onfocus="addDebug('Focus frame 3');" noresize name="windmain" src="<wfmt:postloginpage />" scrolling="auto">
<frame onblur="addDebug('Blur frame 4');" onfocus="addDebug('Focus frame 4');" noresize framespacing="0" border="0" frameborder="0" name="queues" src="workqueues.jsp" scrolling="no" style="BORDER-RIGHT: gray 1pt solid;">
</frameset>
<frame noresize scrolling="no" framespacing="0" border="0" frameborder="0" name="footerbar" src="footer.jsp">
</frameset>
I have popped up a little window to help me view debug away from the window so I can focus and blur and still see the output to see what events are triggering. IE seems to trigger the events on the <frame> tags fine, which means I can achieve what I need to in IE, however FF isn't playing ball. Anybody know what I can do to detect if the window is out of focus. TIA, Dale Can we have two onFocus javascriptscript events for single HTML Tag? Thank you..
Hi I've just found out that a piece of code is not working as expected in certain browsers - but the way in which it goes wrong is not consistent, so maybe it's something wrong with my code. Oddly enough, it works exactly as I was expecting when viewed in IE. Here's the code... any help would be much appreciated. Thanks Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function fillboxAddress() {
if (document.getElementById('tbAddress').innerHTML == '')
{
document.getElementById('tbAddress').innerHTML = 'Address';
}
}
function clearboxAddress() {
if (document.getElementById('tbAddress').innerHTML == 'Address')
{
document.getElementById('tbAddress').innerHTML = '';
}
}
</script>
</head>
<body>
<p><textarea name="tbAddress" rows="2" cols="20" id="tbAddress" onfocus="clearboxAddress()" onblur="fillboxAddress()">Address</textarea></p>
</body>
Hi, I'm having some problems with some javascript events firing in the wrong order under certain workflows. Here's the gist of it: I have a form with many fields, mostly input type = text. Each field as an OnBlur and OnFocus event tied to javascript functions. IE's website (http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx) states that "The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus." and that is exactly what happens when tabbing through the fields. The tricky part is that it doesn't perform this way when CLICKING to another field. When clicking to another field it performs the new field's OnFocus first, and then the first field's OnBlur event after. This is bad because the OnFocus sets a global variable's value to whatever value is in that box at the time it gets focus and if the onblur validation fails, that value is inserted back into the box. So what's happening is the validation for field 1 fails and the value from field 2 is then written into field 1. This also seems to only happen when the page is opened as a modal window as opposed to just opening the page on it's own. It doesn't happen in FireFox, I've only been able to get it to happen on IE 8 + (haven't tried any other browsers.) Anyone else have this happen to them? Does it sound like an IE bug? Thanks Hi- I have a table with numerous textareas that I am able to clear once - the first time the textarea is clicked the default value is cleared and everything is OK. However, at a certain point the user might press a 'Clear' button linked to a function I wrote to reset the values back to the defaults. At this point clicking into the textarea does not clear it. Below is a typical textarea: Code: <textarea rows= "2" cols="15" class="Klabel" id="ta5" onfocus="this.value=''; this.onfocus=null; setbg_color('ta5','#EFA746')" onchange="setbg_color('ta5', '#EBF5FF')">
Type a label
</textarea>
Below are the relevant functions. The Clear function mentioned above just runs 'setbg_color' and 'set_value' for each textarea and sets them to the defaults. Code: function setbg_color(id, color){
document.getElementById(id).style.background=color;
}
function set_value(id, celltype){
document.getElementById(id).value=celltype;
}
Is there anyway to essentially reverse the effects of the this.onfocus=null; statement? I tried something like this.onfocus=true; but that didn't work. An update - I haven't answered the reversing null question but an acceptable solution is to reload the page from within javascript as per http://www.mediacollege.com/internet...ge/reload.html Thanks -Jim ps - As part of my research I came across this http://mvied.com/blog/unobtrusive-input-clear-focus/ which does a smoother job of clearing the textareas but does not solve my question. Hey guys, First shot at JS so please be gentle! I'm trying to get this script to clear the default value of my input elements on focus. It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered. Make sense? Here's the script (thanks in advance!!): Code: <script language="JavaScript">
function clickFocus(input){
input.className = 'focus';
if (input.value = input.defaultValue){
input.value = '';
}
}
function unFocus(input){
input.className = 'entered';
if (input.value == ''){
input.value = input.defaultValue;
input.className = 'normal'
}
}
</script>
<form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)">
<input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)" rows="5">Message</textarea>
<input class="submit" name="submit"type="submit" value="Send Message" />
</form>
this: Code: <body onload="pack = 'Original';recoger_mapa_url();" onkeydown="pulsar_tecla(event, 'onkeypress');" onkeypress="pulsar_tecla(event, 'onkeydown');"> [/CODE] to this: Code: pack = 'Original'; recoger_mapa_url(); window.onkeydown = pulsar_tecla(window.event, 'onkeypress'); window.onkeypress= pulsar_tecla(window.event, 'onkeydown'); does not work(event is undefined). Suggestions ? i had to put to onload commands in a body tag and now only one will work. is there any way to make both work?
hi guys, how can i get this code to load on body onload? without fading in and out? Code: <html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
Thanks Hello, How can i get scroll bar position of body tag ? Thanks in advance. I am pretty new to JavaScript, so I apologize if this is a stupid mistake. I am using this code, but trying to have several slideshows on the page. I have set up two to test it, and one works while the other just displays a static image. What is the best way to do this? Do I need to repeat the script code in the head? Thanks in advance for any help.
This code not work, Code: if( document.body.scrollTop() > 200 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
I want it to work without jQuery, because half my site die's when i use jQuery, jsut want a simple scrollTop script for when im 200px from top it locks navigation fixed top the top, it works with jQuery but not without and been trying for hours to get it to work, any help would be kindly recieve thanks. |
|||||||