Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Small text field issue

    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:

    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
    Last edited by HawaiiThad; 03-22-2009 at 03:23 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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!"

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've made those changes, but the problems still persist.

    New code:
    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

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Try that:
    Code:
    <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';}">

  • Users who have thanked freedom_razor for this post:

    HawaiiThad (03-23-2009)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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>
    Last edited by Philip M; 03-23-2009 at 07:51 PM.

  • Users who have thanked Philip M for this post:

    HawaiiThad (03-23-2009)

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the assistance. I've made all the suggested changes. Here's the new code,
    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.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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
    Code:
    <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
    Code:
    <body onload="document.forms[0].from_name.focus();">
    to see if you can explicitly force the text field back to virgin state.

  • Users who have thanked Old Pedant for this post:

    HawaiiThad (03-24-2009)

  • #8
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Code:
    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}

  • #9
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I think I got it!! :-)

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

    Code:
    <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:
    Code:
    <body onload="prepopulate();">
    And here's the code for the input field:
    Code:
    <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
    Last edited by HawaiiThad; 03-24-2009 at 08:19 AM.

  • #10
    New Coder
    Join Date
    Jun 2006
    Location
    Sweden
    Posts
    49
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by HawaiiThad View Post
    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:
    Code:
    this.style['text-align']
    to this instead:
    Code:
    this.style.textAlign


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •