[SOLVED] Changing onfocus of a textbox

djeyewater · #1 (**permalink**) Jan 2nd, 2008, 11:26

I'm trying to learn javascript at the moment, but I can't figure out why the below code doesn't work. The page has a textbox you can't type in by using onfocus="blur()", then click the button to make onfocus="focus()" so you can type in it, then click again to change it back to onfocus="blur()". But it doesn't work. Can anyone tell me what I've done wrong?

Thanks

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var i=0;
function typejim()
{
    if (i==0)
    {
        window.document.form1.textbox1.onfocus="focus()";
        window.document.form1.textbox1.value="You can type in me";
        window.document.form1.typebutton.value="Cancel";
        i++;
    }
    else if (i==1)
    {
        window.document.form1.textbox1.onfocus="blur()";
        window.document.form1.textbox1.value="you can't type in me!";
        window.document.form1.typebutton.value="type";
        i--;
    }
    
}
</script>
</head>

<body>
<form name="form1">
<input type="text" name="textbox1" value="you can't type in me!" onfocus="blur()">
<input type="button" value="type" name="typebutton" onclick="typejim()">
</form>
</body>
</html>

Stuart · #2 (**permalink**) Jan 5th, 2008, 03:00

OK, this should be accomplished by disabling the text box. Here is the entire code:

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var i=0;
function typejim()
{
    if (i==0)
    {
        window.document.form1.textbox1.value="";
        window.document.form1.textbox1.disabled=false;
        window.document.form1.typebutton.value="Cancel";
        i++;        
    }
    else if (i==1)
    {
        window.document.form1.textbox1.value="You can't type in me!";
        window.document.form1.textbox1.disabled=true;
        window.document.form1.typebutton.value="type";
        i--;
    } 
}
</script>
</head>

<body>
<form name="form1" action="">
<input type="text" name="textbox1" value="You can't type in me!" disabled="disabled">
<input type="button" value="type" name="typebutton" onClick="typejim()">
</form>
</body>
</html>

That should do it!

Cheers

djeyewater · #3 (**permalink**) Jan 5th, 2008, 08:29

Thanks for your help, that works well.

I also got it to work in the original way I was trying, although I think I need to learn quite a bit more before I understand it.

Stuart · #4 (**permalink**) Jan 5th, 2008, 13:01

How did you solve it with the original? Then, I can explain it to you.

djeyewater · #5 (**permalink**) Jan 5th, 2008, 15:32

Thanks, here's the javascript.

Code: Select all

var i=0;

function typejim()
{
    if (i==0)
    {
        window.document.form1.textbox1.onfocus=function myfocus(){window.document.form1.textbox1.focus();}
        window.document.form1.textbox1.value="You can type in me";
        window.document.form1.typebutton.value="Cancel";
        i++;
    }
    else if (i==1)
    {
        window.document.form1.textbox1.onfocus=function myfocus(){window.document.form1.textbox1.blur();}
        window.document.form1.textbox1.value="you can't type in me!";
        window.document.form1.typebutton.value="type";
        i--;
    }
    
}

It doesn't work in IE but worked okay in Opera, FF & Safari. In IE setting onfocus=blur() doesn't seem to work. This is only for practice, not anything practical so I'm not too bothered if it doesn't work in IE, although it would be useful to know why it doesn't work.

What I don't understand about it is:
1. Why didn't the original function (setting window.document.form1.textbox1.onfocus=focus()) work?
2. Why does it only work if the function myfocus is declared while setting onfocus? If I change the myfocus function to a seperate function and then just call window.document.form1.textbox1.onfocus = myfocus() it doesn't work.
3. In the myfocus function it must refer to the element you want focused, I don't understand why? (I couldn't get it to work using self.focus() either).

If you're able to explain any of things to me that would be great!

Thanks

Stuart · #6 (**permalink**) Jan 5th, 2008, 17:38

OK. First of all, about the IE thing, your code is a bit strange and IE is picky with stuff like that.

Now to explain:
1. focus() is a function that puts the cursor into the textbox automatically. It doesn't disable the textbox like you wanted.
2. It's not usually a good idea to call functions in that particular area. It might be throwing errors.
3. In javascript, you always need to specify the exact element so that it works correctly.

So, I suggest using my idea, since you run into less problems, and the code is cleaner.

Cheers

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Change Input Textbox Background Color	tejaxx	JavaScript Forum	4	Nov 19th, 2007 20:16
[SOLVED] Changing Colours	crackafaza	PHP Forum	37	Oct 25th, 2007 11:55
[SOLVED] Changing from html to CSS	mcdanielnc89	Web Page Design	16	Oct 11th, 2007 04:29
[SOLVED] Changing pictures on same page	R8515198	JavaScript Forum	7	Oct 3rd, 2007 00:14
events in NS (onfocus, onblur)	spinal007	Web Page Design	6	Apr 27th, 2004 16:32

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Changing onfocus of a textbox