JavaScript - Modifying Textarea Onfocus/onblur Help

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.

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&nbsp;Test&nbsp;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..

There is a Js file i am including in my application that has a below function
Code:

function highlightInputs() {
	var inputs = document.getElementsByTagName('input');
	var i;
	for (i=0; i<inputs.length; i++) {
		inputs[i].onfocus = function() {
			this.style.background = '#F6F6F6';
		}
		inputs[i].onblur = function() {
			this.style.background = '#FFF';	
		}
	}
}
addEvent (window, "load", highlightInputs);

Code:

<INPUT TYPE="text" NAME="InvoiceDate_DT" id="InvoiceDate_DT" value="<?=($InvoiceDate_DT)?>" class="smtxtbox" onBlur="javascript:alert('test');">

Now in the same page, i have a textbox and i try to fire an onblur() event which is not getting fired. Onclick() works but onblur() doesnt..strange.. When i disable the .js file it gets fired. What is the problem?? Its on all the browsers

Thanks

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

Hi, I'm a little rusty on my javascript. I'm trying to use onKeyUp and onBlur to validate html table field text entry. I'm using Firefox in Windows XP, and Javascript is turned on. Mind taking a look to see why it's not working? Thanks! -Jason

Code:

<html>
<head>
<title>javascript onKeyUp problem example</title>
<script type="text/javascript"><!--

//Validates full zip code when zip code field is left.  If invalid, should pop an alert message.
function onBlur_Zip() {
	var zipCodePattern = /^\d{5}$|^\d{5}-\d{4}$/;
    if (zipCodePattern.test(document.getElementByID("zip").value) == -1) {
    	alert("Please enter a valid zip code.");
    }
    return false;
}

//Validates partial zip code.  If invalid, should make table row background color yellow.
function onKeyPress_Zip() {
	var zipCodePattern = /^\d{0,5}$|^\d{5}-\d{0,4}$/;
	var val = document.getElementByID("zip").value;
	alert(val);
    if (zipCodePattern.test(document.getElementByID("zip").value) == -1) {
    	alert("onkeypress zip false");
    	document.getElementByID("zipRow").style.backgroundColor="yellow";
    }
    else {
    	alert("onkeypress zip true");
    	document.getElementByID("zipRow").style.backgroundColor="white";
    }
    return false;
}
// -->
</script>
</head>
<body>
<form><table border=1 cellpadding=5>
<tr id="zipRow">
<td>Test field:</td>
<td><input id="zip" type="text" name="zip" onKeyUp="javascript:onKeyPress_Zip()" onBlur="javascript:onBlur_Zip()" /></td>
</tr></table></form>
</body>
</html>

I have a problem with one simple script, which works in every browser, just not in IE6 and IE7. You can see the script at http://bbtalk.eu/iframe.html - when you click on the iframe, you should see "clicked at the bottom". But it doesnt work in IE6 and IE7. Do anyone know how to fix that? Thank you

I am trying to make an onblur that calls a function and passes it some text, for example:

onblur = "function("Hello")"

however this wont work as it is not even calling the function. I have tried all the different encapsulation tags I can think of but still no luck is there any way of doing it or can I assign the text to a variable and call the function in the onblur?

Thanks.:confused:

okay. clearing a form. I have a clear button. when I push it, I want all the red text boxes and onblur messages to disappear. anyone have an idea on where i can start?

heres javascript
Code:

function isFormValid() 
{	
	var userF = document.getElementById('FName').value;
	var userL = document.getElementById('LName').value;
	var userPW = document.getElementById('pw').value;
	var userPW2 = document.getElementById('pw2').value;
	var userBDay = document.getElementById('BDay').value;
	var userEmail = document.getElementById('email').value;
	var NameFormat = /^[A-Za-z]{2,12}$/;
	var PWFormat = /^[A-Za-z0-9]{6,12}$]/;
	var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
	var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
	var retVal = true;
	var errorMsg = "";
	
	if (!NameFormat.test(userF))
		{
		assignErrorClass("FName");
		errorMsg = "First Name is required. 2-12 letters only\n";
		retVal = false;
		}
	if (!NameFormat.test(userL))
		{
		assignErrorClass("LName");
		errorMsg = errorMsg + "Last Name is required. 2-12 letters only\n"; 
		retVal = false;
		}
	if (!PWFormat.test(userPW))
		{
		assignErrorClass("pw");
		errorMsg = errorMsg + "Password is required. 6-12 letters or numbers only.\n";
		retVal = false;
		}
	if (userPW2 == "")
		{
		assignErrorClass("pw2");
		errorMsg = errorMsg + "Please Retype password.\n";
		retVal = false;
		}
	if ((userPW != userPW2) && (userPW2 !== ""))
		{
		assignErrorClass("pw2");
		errorMsg = errorMsg + "Passwords do not match.\n";
		retVal = false;
		}
	if (userBDay == "")
	{
		assignErrorClass("BDay");
		errorMsg = errorMsg + "Please Enter a Birthday.\n";
		retVal = false;
	}
	if ((!BDayFormat.test(userBDay)) && (userBDay !== "")) 
			{
				assignErrorClass("BDay");
				errorMsg = errorMsg + "Incorrect Birthday format\n";
				retVal = false;
			}
	if (badBirthday("BDay") && (userBDay !== "")) {
		assignErrorClass("BDay");
		retVal = false;
		errorMsg = errorMsg + "Invalid Birthday\n";
		}
		
	if (userEmail == "")
		{
		assignErrorClass("email");
		errorMsg = errorMsg + "Please Enter an Email address.\n";
		retVal = false;
		}
	if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
		{
		assignErrorClass("email");
		errorMsg = errorMsg + "Please Enter a valid Email address.\n";
		retVal = false;
		}
	if (!retVal)
		{
		alert( errorMsg);
		}
	return retVal;
}
         
function assignErrorClass(objName) 
{
	var obj = document.getElementById(objName);
	obj.className = "err";
}
function badBirthday( objName) {
	var obj = document.getElementById(objName);
	var dateStr = obj.value;
	var mn = dateStr.split("/")[0];
	var dy = dateStr.split("/")[1];
	var yr = dateStr.split("/")[2];
	var dateObj = new Date(yr,mn-1,dy);  //JavaScript and PHP number the months 0 to 11.
	if (dateObj.getFullYear() != yr || dateObj.getMonth()+1 != mn || dateObj.getDate() != dy) {
		return true;
	} else {
		return false;
	}
	}
              
function checkFName()
{
	var userF = document.getElementById('FName').value;
	var elementF = document.getElementById('labelFName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userF))
		{
		elementF.innerHTML = "First Name is required. 2-12 letters only";
		elementF.style.color = "red";
		}
	else
		{
		elementF.innerHTML = "";
		elementF.style.color = "green"; 
		}
}

function checkLName()
{
	var userL = document.getElementById('LName').value;
	var elementL = document.getElementById('labelLName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userL))
		{
		elementL.innerHTML = "Last Name is required. 2-12 letters only";
		elementL.style.color = "red";
		}
	else
		{
		elementL.innerHTML = "";
		elementL.style.color = "green"; 
		}
}
function checkpw()
{
	var userPW = document.getElementById('pw').value;
	var elementPW = document.getElementById('labelpw');
	var PWFormat = /^[A-z0-9]{6,12}$/;
	if (!PWFormat.test(userPW))
		{
		elementPW.innerHTML = "Password is required. 6-12 letters or numbers only.";
		elementPW.style.color = "red";
		}
	else
		{
		elementPW.innerHTML = "Good Password";
		elementPW.style.color = "green"; 
		}
}
function checkpw2()
{
	var userPW2 = document.getElementById('pw2').value;
	var userPW = document.getElementById('pw').value;
	var elementPW2 = document.getElementById('labelpw2');
	if ((userPW != userPW2) && (userPW2 !== ""))
		{
		elementPW2.innerHTML = "Passwords do not match.";
		elementPW2.style.color = "red";
		}
	else if (userPW2 == "") 
		{
		elementPW2.innerHTML = "Please Retype password.";
		elementPW2.style.color = "red";
		}
	else
		{
		elementPW2.innerHTML = "Passwords Match";
		elementPW2.style.color = "green"; 
		}
}
function checkBDay()
{
	var userBDay = document.getElementById('BDay').value;
	var elementBDay = document.getElementById('labelBDay');
	var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
	if (userBDay == "")
		{
		elementBDay.innerHTML = "Please enter A Birthday.";
		elementBDay.style.color = "red";
		}
		else if ((!BDayFormat.test(userBDay)) && (userBDay !== "")) 
		{
			elementBDay.innerHTML = "Please enter mm/dd/yyyy format.";
			elementBDay.style.color = "red";
		}
		else if ((badBirthday("BDay")) && (userBDay !== ""))
		{
			elementBDay.innerHTML = "Please enter valid Birthday.";
			elementBDay.style.color = "red";
		}
	else
		{
		elementBDay.innerHTML = "";
		elementBDay.style.color = "green"; 
		}
}
function checkEmail()
{
	var userEmail = document.getElementById('email').value;
	var elementEmail = document.getElementById('labelEmail');
	var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
	if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
		{
		elementEmail.innerHTML = "Please enter a Valid Email address.";
		elementEmail.style.color = "red";
		}
	else if (userEmail == "") 
		{
		elementEmail.innerHTML = "Please enter an Email address.";
		elementEmail.style.color = "red";
		}
	else
		{
		elementEmail.innerHTML = "";
		elementEmail.style.color = "green"; 
		}
}

heres the html
Code:

<form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">

* First Name: <input type="text"  name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />



* Password: <input type="password" id="pw" name="Password" onblur="checkpw();"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />


I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />



I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />



My favorite element is:
	<select name="element" id="element">
    	<option value="">select</option>
		<option value="fire">Fire</option>
		<option value="earth">Earth</option>
		<option value="water">Water</option>
		<option value="air">Air</option>
	</select><br />



*Birthday: mm/dd/yyyy<input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br /> 



*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />


	<input type="submit" value="Submit" />
	<input type="reset" value="Clear" />

</form>

css i guess would be
Code:

.err {
	border: 2px solid #FF0000;}
#errMsg {
	font-size: 110%;
	color: #FF0000;}

super thanks!!!!!!
-pumpkin

Hello,
I am new to JavaScript and I am asking for help with this problem.
I have a three textboxes in a form. Using OnBlur, I am attempting to call a function to add one to an input textbox to add 1 to the cost.
As the user enters text into textbox01, the number 1 appears in the input box about cost, as the user enters text into textbox02, the input box displays 2 and the user enters text into textbox03, the input box displays 3.

My JavaScript is as follows:
<script type="text/javascript">
//copies contents of first textbox to second textbox
function copyValue() {
var textbox1 = document.getElementById("textbox1");
var textbox2 = document.getElementById("textbox2");

var textbox3 = document.getElementById("textbox3");

var txtAttendee = document.getElementById("txtAttendee");
var input_A = document.getElementById("input_A");

textbox2.value = textbox1.value;
txtAttendee.value = 1;
input_A.value = 1;

}
</script>

In the form I have this:
<input type="text" id="textbox3" style="background-color:yellow" onblur="copyValue();" />

I would greatly appreciate ANY help with being able to calculate costs, perhaps using the JavaScript ++/-- operators.

Thank you in advance for your time and assistance.

Hi,

I have a problem in javascript, where entering a value in the textbox during onblur I am doing a refresh to bring in the
updated records from the DB , before the on blur refresh is completed if the user clicks the search button (onclick)
during the first click nothing is happening as the refresh is still going on. During the second click when the on blur refresh
is completed it will open a popup.

The problem here is I am unable to disable/inactivate the search button untill the refresh is completed as well as I dont have any control over the
refresh time as well. This is like already an event is in progress and where we are invoking another event which is not having
any effect. In such case how i can handle this scenario?

Thanks.