|
JavaScript - Amending Textarea Content Onfocus/onblur
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>
Similar TutorialsHey 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>
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"){
}
}
}
}
}
}
}
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 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. i want to assign content of textarea to a div .. like in twitter when you type something and press "Tweet" a div is created and has the content of textarea.. how can i implement it , i know something about getElementById() but not sure how it can help me here I'm trying to get this code to work in browsers other than IE. It prints the contents of a textarea, say, a notepad, first bringing up the print dialog. It does it with an (almost) invisible iframe. At first I thought it was only for IE, but I must have tested incorrectly (after a few dozen times uploading and printing out you lose your sanity) and I now see that it DOES work in FF, but not in Chrome. For me (and maybe others?) that is very good news because it will probably be easier for someone more knowledgeable than me to solve a Chrome problem rather than an "all other than IE" browsers problem. Code: /*
for notepad printouts
*/
function printInput(f){
var ifr = window.frames['printFrame'];
if (ifr){ //print the content of the invisible iframe
ifr.document.getElementById('content').innerHTML=f.WRKNOTEPAD.value.replace(/\n/g,'<br />');
ifr.focus();
ifr.print();
}
else { //print by opening a new window and then closing it
var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body onload="window.print();window.close()"><div>'+f.WRKNOTEPAD.value.replace(/\n/g,'<br />');+'</div></body></html>'
var win = window.open('','_blank','menubar,scrollbars,resizable');
win.document.open();
win.document.write(html);
win.document.close();
}
}
function writeContent(objIframe){
var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body><div id="content"></div></body></html>'
objIframe.document.write(html);
objIframe.document.close();
}
I think this bit: if (ifr) tests for IE and if it fails the condition, it dynamically creates a new window to print from. And I now see it does just this in FF. But not in Chrome. So narrowing it down I think the Chrome failure is in this bit: Code: else { //print by opening a new window and then closing it
var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body onload="window.print();window.close()"><div>'+f.WRKNOTEPAD.value.replace(/\n/g,'<br />');+'</div></body></html>'
var win = window.open('','_blank','menubar,scrollbars,resizable');
win.document.open();
win.document.write(html);
win.document.close();
}
Is there anyone who can see why this would fall over in Chrome? Hi everyone so ive been doing some searching on how to save textarea content as a file and found ... Code: http://www.codingforums.com/showthread.php?t=32077 Saving works ok but the issue I have is that when you enter some text and hit the submit button the content of the page becomes the content within the the file your saving check demo so you can see for yourself: Code: http://6d8.info/demo.html So what I need is for the page to stay the same ie always demo.html with textarea and submit button and not the saving file content Any help is appretiated and as normal thank you in advance ... Hi, I am trying to amend the showHint Function from w3schools. I adapted the basic script to allow multiple calls and I don't have a permanent array so I made my php page create one from the table. Have tried to play around with this a bit but I currently get nothing. My script is: Code: <head>
<script type="text/javascript">
function showHint(str,FILE+str,ID){
if (str.length==0){
document.getElementById(ID).innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",FILE,true);
xmlhttp.onreadystatechange=function(){
if {xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send()
}
</script>
</head>
<body>
<label>Search by name: </label>
<input type="text" class="input" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Search':this.value;" onkeyup="showHint('getNames.php?q=','txtHintName')" Value="Search" />
<br />
<div id="txtHintName"></div>
<br />
There will be more calls but I thought I would try and get one working first. My Name.php is: PHP Code: <?php $con = mysql_connect("localhost","user","password"); if (!$con){ die('Could not connect: ' . mysql_error()); } mysql_select_db("mydb", $con); $result=mysql_query("SELECT * FROM members"); while($row = mysql_fetch_array($result)){ echo "$a[]='" . $row['name'] . "';"; } $q=$_GET["q"]; if (strlen($q) > 0){ $hint=""; for ($i=0; $i<count($a); $i++){ if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))){ if ($hint==""){ $hint=$a[$i]; }else{ $hint=$hint . " , ".$a[$i]; } } } } if ($hint == ""){ $response="no suggestion"; }else{ $response=$hint; } echo $response; ?> mysql_close($con); ?> Nothing happens. I have names in my db so they are there to be called. I am using a javascript audio player on a webpage that has an option to download the track by right clicking on a link called 'mp3' at the end of each track in the playlist. When the user right clicks on the track name however all that can be downloaded is an html file. I am trying to find a way of changing this so that right clicking on the track and choosing the 'save link as' option will download the mp3. I have been led to believe that I can use a script such as this one: http://abeautifulsite.net/blog/2008/...-click-plugin/ to generate a custom content menu for downloading tracks, or somehow downloading the mp3, but I am at a loss at to how to do this. Here's a screenshot of a track in the playlist: And here is the source: Code: {name:"foster manganyi na tintsumi ta tilo - zion (ndzi teke riendzo no. 1) <span style=\"color:#BDBDA1; font-size:12px;\">[from nick]</span>",mp3:"./songs//nick/zion.mp3"}
I would be grateful for any advice on getting this working, Thanks, Nick Good morning Guru's and Experts, I really need your help with this one. It seems that the function this_week('end') is returning a bad date of 12/33/2014 (mm/dd/yyyy) where it should properly read: 01/02/2015 Code: function this_week(x) {
var today, todayNumber, fridayNumber, sundayNumber, monday, friday;
today = new Date();
todayNumber = today.getDay();
mondayNumber = 1 - todayNumber;
fridayNumber = 5 - todayNumber;
if (x === 'start') {
//var start_dd = today.getDate() + mondayNumber
var start_dd = today.getDate()
var start_mm = today.getMonth() + 1
var start_yyyy = today.getFullYear()
return start_mm + '/' + start_dd + '/' + start_yyyy
}
if (x === 'end') {
var end_dd = today.getDate() + fridayNumber
var end_mm = today.getMonth() + 1
var end_yyyy = today.getFullYear()
return end_mm + '/' + end_dd + '/' + end_yyyy
}
}
Reply With Quote 12-29-2014, 07:43 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts I understand that you are trying to get the date next Friday. Try this script:- Code: <span id = "info"></span>
<script type = "text/javascript">
var curr = new Date(); // get current date
var first = curr.getUTCDate() - curr.getUTCDay(); // First day is the day of the month - the day of the week
var last = first + 5; // last day is the first day + 5 = Friday
var lastday = new Date(curr.setDate(last));
var yy = lastday.getUTCFullYear();
var mth = lastday.getUTCMonth()+1;
if (mth<10) {mth = "0" + mth}
var dy = lastday.getUTCDate();
if (dy<10) {dy = "0" + dy}
// now manipulate the display of year,month,date as desired
var result = mth + "/" + dy + "/" + yy;
document.getElementById("info").innerHTML = "Week Ending Friday " + result;
</script>
Lottery: A tax on people who are bad at math. Hi 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 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 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()'>
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. Can we have two onFocus javascriptscript events for single HTML Tag? Thank you..
Hi, I have dynamic table with the fileds that have input boxes where X is the counter. Finaly I got unique id ABC1,ABC2,ABC3......... <table><tr> <td><input id=ABC<%=X%> value="<%=RS("Name")%>"></td> <td><input id=ABC<%=X%> value="<%=RS("Name")%>"></td> <td><input id=ABC<%=X%> value="<%=RS("Name")%>"></td> <td>...</td><td>...</td><td>...</td></tr></table> How to get value of each row onblur in javascript Thanks a lot, MZ |
|||||||