Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Specifying font style in Javascript values

Status
Not open for further replies.
webmonkey8

webmonkey8

Programmer
Jun 11, 2003
13
CA
Hello, I have a script which initially fills in the value of a form field. Upon clicking in the field to fill out, the text values disappear, which is the correct behaviour. I'm just wondering how I can get the text in the initial values to have a different font and color?

Here's my code in the <head> tag:

<script language=&quot;Javascript&quot;>
<!--
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = &quot;&quot;
}
}
//-->
</script>


And here is the form field:

<form>
<input type=&quot;text&quot; size=15 value=&quot;Enter URL&quot; onFocus=&quot;doClear(this)&quot;>
</form>

I just want to have the &quot;Enter URL&quot; text to have a different font and color. How do I do this? Thanks.
 
Sort by date Sort by votes
webmonkey,

you can change the color and font using :

theText.style.color = 'rgb(80,80,80)' // or #808080 hex string
theText.style.font = 'Georgia' // or whatever font
theText.style.weight = 'Bold'

You could probably set the onchange handler to deal with the logic of when you want to change the style.

I hope this helps.

Gary Haran
********************************
 
Upvote 0 Downvote
Where exactly would I put this code? You have to excuse me, as I'm not familiar with Javascript. I took the above script from another site and I just want to modify it.

So, should I put it like this?:

<script language=&quot;Javascript&quot;>
<!--
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = &quot;&quot;
theText.style.weight = 'Bold'
}
}
//-->
</script>
 
Upvote 0 Downvote
I believe that would be right! :)

Of course all this code depends on you. You can choose where to put it but that would look like a logical place to have it! :)

Gary Haran
********************************
 
Upvote 0 Downvote
Help! I've inserted that code into the script and nothing has changed! Am I missing something?
 
Upvote 0 Downvote
Here is a working example using onblur and onfocus :

<HTML>
<HEAD>
<title>example</title>
</HEAD>
<BODY>


<script language=&quot;Javascript&quot;>
function focusHandler(theText)
{
if (theText.value == theText.defaultValue)
{
theText.value = &quot;&quot;
}
theText.style.color = &quot;rgb(128,128,255)&quot;
theText.style.font = 'Georgia' // or whatever font
theText.style.weight = 'Bold'
}

function blurHandler(theText)
{

if (theText.value == &quot;&quot;)
{
theText.value = theText.defaultValue
}
theText.style.color = &quot;rgb(0,0,0)&quot;
theText.style.font = 'Arial'
theText.style.weight = 'normal'
}
</script>


And here is the form field:

<form>
<input type=&quot;text&quot; size=15 value=&quot;Enter URL&quot; defaultValue=&quot;Enter URL&quot; onFocus=&quot;focusHandler(this)&quot; onblur=&quot;blurHandler(this)&quot;>
</form>

</BODY>
</HTML>


Gary Haran
********************************
 
Upvote 0 Downvote
Ok, I copied and pasted the code and now I'm getting an error on the page. No color and font change even when I change it in the code. All I want is the value text to be italicized and red color. If you can post this, I'd really appreciate it! :D
 
Upvote 0 Downvote
Yes, the error message is

Line: 16
Char: 5
Error: Invalid argument.
Code: 0


The font is still the same and there are no messages until I click within the textfield and then I get the error notification at the bottom left corner of the browswer. I'm using IE 5.5
 
Upvote 0 Downvote
Here's the code:

<HTML>
<HEAD>
<title>example</title>
</HEAD>
<BODY>


<script language=&quot;Javascript&quot;>
function focusHandler(theText)
{
if (theText.value == theText.defaultValue)
{
theText.value = &quot;&quot;
}
theText.style.color = &quot;#FF0000&quot;
theText.style.font = 'Georgia' // or whatever font
theText.style.weight = 'Bold'
}

function blurHandler(theText)
{

if (theText.value == &quot;&quot;)
{
theText.value = theText.defaultValue
}
theText.style.color = &quot;#FF0000&quot;
theText.style.font = 'Arial'
theText.style.weight = 'normal'
}
</script>


And here is the form field:

<form>
<input type=&quot;text&quot; size=15 value=&quot;Enter URL&quot; defaultValue=&quot;Enter URL&quot; onFocus=&quot;focusHandler(this)&quot; onblur=&quot;blurHandler(this)&quot;>
</form>

</BODY>
</HTML>


Once loaded, the text is still black. It only changes to red only when I click into it to get rid of the inital value and then click out side the text box. Strange.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
161
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
284
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
250
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top