...

View Full Version : Small text field issue



HawaiiThad
03-22-2009, 04:16 PM
I'm trying to make an input field with some default text, centered and in grey that disappears when the user brings focus to the field, etc.

I've got most of the bugs worked out, but if I click on the submit button, then use my browser's back button, the text that was entered earlier is still there, but it is centered and grey. It shouldn't be.

Here is the relevant part of my code:



<td>Name:</td><td><input type="text" name="name" value="Please enter your name" style="width:220px; color:grey; text-align:center;"
onFocus="if (this.value=='Please enter your name') {this.value=''; this.style.color='black'; this.style['text-align']='left';}"
onBlur="this.value=this.value.replace(/^\s+|\s+$/g,''); if (this.value=='') {this.value='Please enter your name'; this.style.color='grey'; this.style['text-align']='center';}"></td>


You can test my test page here,
http://hawaiithad.com/scratch_area/contact

I get the problem in Safari both on my Mac and on my iPhone.

Hmm, I just tried it in Firefox and I've got even more little issues with not switching from centered to left-justified alignment.

Does anyone know what I am doing wrong?

TIA,
Thad

Philip M
03-22-2009, 05:41 PM
Suggestions:-

Spell onfocus and onblur thus without capital letters.

name="name" - you should avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id'.


Bookshop Assistant: "This book about Javascript will save you half your work".
Lazy Student: "Oh good! I'll take two!"

HawaiiThad
03-22-2009, 08:39 PM
I've made those changes, but the problems still persist.

New code:


<td>Name:</td><td><input type="text" name="from_name" value="Please enter your name" style="width:220px; color:grey; text-align:center;"
onfocus="if (this.value=='Please enter your name') {this.value=''; this.style.color='black'; this.style['text-align']='left';}"
onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if (this.value=='') {this.value='Please enter your name'; this.style.color='grey'; this.style['text-align']='center';}"></td>


And here's the proper link,
http://hawaiimathtutor.com/scratch_area/contact

freedom_razor
03-23-2009, 08:18 PM
Try that:

<textarea name="message" rows="15" cols="50" style="color:grey; text-align:center;"
onfocus="if (this.value=='Enter your message here') {this.value='';this.style.color='black'; this.style.textAlign='left';}"
onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if (this.value=='') {this.value='Enter your message here'; this.style.color='grey'; this.style.textAlign='center';}">

Philip M
03-23-2009, 08:46 PM
The color (colour in English English) grey (English English) should be spelled gray (American English). Or preferably use "#808080".


<textarea name="message" rows="15" cols="50" style="color:gray; text-align:center;"
onfocus="if (this.value=='Enter your message here') {this.value='';this.style.color='gray'; this.style.textAlign='left';}" onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if (this.value=='') {this.value='Enter your message here'; this.style.color='black'; this.style.textAlign='center';}">Enter your message here</textarea>

HawaiiThad
03-23-2009, 09:23 PM
Thanks for the assistance. I've made all the suggested changes. Here's the new code,


<input type="text" name="from_name" value="Please enter your name" style="width:220px; color:#808080; text-align:center;"
onfocus="if (this.value=='Please enter your name') {this.value=''; this.style.color='black'; this.style.textAlign='left';}"
onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if (this.value=='') {this.value='Please enter your name'; this.style.color='#808080'; this.style.textAlign='center';}">


I've read on a couple of web sites that javascript attributes are case insensitive, but I've gone ahead and changed onBlur & onFocus to onblur & onfocus just in case.

I'm still having the problem when I use the back button. The text I'd previously entered is gray and centered but shouldn't be.

Old Pedant
03-24-2009, 01:33 AM
No, JAVASCRIPT attributes *ARE* case sensitive.

But event handling designators are *NOT* part of JavaScript and are part of HTML.

So actually you can do


<input type=button onclick="whatever( )">
or
<input type=button ONCLICK="whatever( )">
or
<input type=button onClick="whatever( )">
or
<input type=button oNcLiCk="whatever( )">

Note that this is not true in xhtml, but that's a different topic.

As for the action with the back button: Probably not much you can do about that. Various browsers act differently to a BACK request. You *might* try doing something like


<body onload="document.forms[0].from_name.focus();">

to see if you can explicitly force the text field back to virgin state.

randomuser773
03-24-2009, 04:20 AM
if (this.value=='Please enter your name')

You can make that more maintainable by using the defaultValue property:

if( this.value==this.defaultValue )...

if( this.value.replace(/\s/g, "")=="" ){this.value = this.defaultValue}

HawaiiThad
03-24-2009, 09:09 AM
I think I got it!! :-)

I found and modified some code from another site to pre-populate the fields (only) when they are empty:



<script type="text/javascript">
<!--
function inputs_prepopulate() {
inputs = document.getElementsByTagName('input');
n_inputs = inputs.length;
for (i = 0; i < n_inputs; i++) {
if (inputs[i].type=='text') {
if (!inputs[i].value) {
inputs[i].value=inputs[i].title;
}
if (inputs[i].value==inputs[i].title) {
inputs[i].style.color='#808080';
inputs[i].style.textAlign='center';
} else {
inputs[i].style.color='black';
inputs[i].style.textAlign='left';
}
}
}
}

function textareas_prepopulate() {
textareas = document.getElementsByTagName('textarea');
n_textareas = textareas.length;
for (i = 0; i < n_textareas; i++) {
if (inputs[i].type=='text') {
if (!textareas[i].value) {
textareas[i].value=textareas[i].title;
}
if (textareas[i].value==textareas[i].title) {
textareas[i].style.color='#808080';
textareas[i].style.textAlign='center';
} else {
textareas[i].style.color='black';
textareas[i].style.textAlign='left';
}
}
}
}

function prepopulate() {
inputs_prepopulate();
textareas_prepopulate();
}

// -->
</script>


Added to the body tag:


<body onload="prepopulate();">


And here's the code for the input field:


<input type="text" name="from_name" value="" title="Please enter your name" style="width:220px;"
onfocus="if (this.value==this.title) {this.value=''; this.style.color='black'; this.style.textAlign='left';}"
onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if (this.value=='') {this.value=this.title; this.style.color='#808080'; this.style.textAlign='center';}">


Thanks for the assistance.

Thad

Nicklas
03-24-2009, 08:51 PM
Hmm, I just tried it in Firefox and I've got even more little issues with not switching from centered to left-justified alignment.

Does anyone know what I am doing wrong?

yes, change this:

this.style['text-align']

to this instead: ;)

this.style.textAlign



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum