Probably easy javascript question

Show off new creations, get help, or just chat about all aspects of web development and design.

Probably easy javascript question

Postby Blink on Tue Oct 02, 2007 8:35 pm

Pretty simple, but my js knowledge is lame

If you click in the Search Tutorials box at the top of the homepage you will notice it removes the text so you can start typing. Problem is this only happens after the page has loaded.

I want this to happen instantly, or be loaded before the content basically.

Here is the script:

Code: Select all
addEvent(window, 'load', init, false);

function init() {
    var formInputs = document.getElementsByTagName('input');
    for (var i = 0; i < formInputs.length; i++) {
        var theInput = formInputs[i];
       
        if (theInput.type == 'text' && theInput.className.match(/\bcleardefault\b/)) { 
            /* Add event handlers */         
            addEvent(theInput, 'focus', clearDefaultText, false);
            addEvent(theInput, 'blur', replaceDefaultText, false);
           
            /* Save the current value */
            if (theInput.value != '') {
                theInput.defaultText = theInput.value;
            }
        }
    }
}

function clearDefaultText(e) {
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
   
    if (target.value == target.defaultText) {
        target.value = '';
    }
}

function replaceDefaultText(e) {
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
   
    if (target.value == '' && target.defaultText) {
        target.value = target.defaultText;
    }
}


And it's being referenced in the index like this (fixed):

Code: Select all
<input type="text" class="searchField cleardefault" name="search" value="Search Tutorials" />


Any ideas? Cheers
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Postby BlekksPoncho on Tue Oct 02, 2007 9:25 pm

:wink: eh Blink,

Anyway, I don't know if this is the best way, because I have only just started JS (about a week ago), anyway, when I do it inline, it is fine, because it loads it as the content is loaded. There is probably a way to load it before the content is loaded but I am definite this will be fine. Or just temporary if you are a bit anal.

Code: Select all
onclick="this.value=''"


Put that in your input tag.
-----------------------
I'm not drunk, I always eat plastic.
User avatar
BlekksPoncho
Sir Post-a-lot
Sir Post-a-lot
 
Joined: Sat Apr 01, 2006 10:48 pm
Location: England - UK

Postby Jest@ on Tue Oct 02, 2007 11:23 pm

erm, not sure entirely what you're trying to achieve...? The 'Search Tutorials' text is there for me from the start.
Highlight to read:
It was earth all along
User avatar
Jest@
Veteran
Veteran
 
Joined: Mon Nov 22, 2004 1:50 am
Location: London UK

Postby Tablespoon on Wed Oct 03, 2007 12:22 am

He wants the text to disappear when you give focus to the text box. It does do that but only after the page has finished loading completely. He's trying to make it disappear regardless of how much of the page has loaded.
User avatar
Tablespoon
Regular
Regular
 
Joined: Tue Jan 24, 2006 5:15 pm
Location: Orange County

Postby Jest@ on Wed Oct 03, 2007 12:27 am

Yeah, I got it now :D was confused..

btw, blinkeh posted the wrong bit of html at the bottom, fixed.
Highlight to read:
It was earth all along
User avatar
Jest@
Veteran
Veteran
 
Joined: Mon Nov 22, 2004 1:50 am
Location: London UK

Postby zombie@computer on Wed Oct 03, 2007 7:01 am

Blekk wrote::wink: eh Blink,

Anyway, I don't know if this is the best way, because I have only just started JS (about a week ago), anyway, when I do it inline, it is fine, because it loads it as the content is loaded. There is probably a way to load it before the content is loaded but I am definite this will be fine. Or just temporary if you are a bit anal.

Code: Select all
onclick="this.value=''"


Put that in your input tag.
dont forget the onblur thingy

Code: Select all
<input value="Search Tutorials" onclick="this.value=''" onblur="this.value='Search Tutorials'"/>

does exactly the same as those 200 lines of JS :P
When you are up to your neck in shit, keep your head up high
zombie@computer
Forum Goer Elite™
Forum Goer Elite™
 
Joined: Fri Dec 31, 2004 5:58 pm
Location: Lent, Netherlands

Postby BaRRaKID on Wed Oct 03, 2007 10:23 am

I've no sign
BaRRaKID
Veteran
Veteran
 
Joined: Sun Oct 10, 2004 1:46 pm
Location: PORTUGAL!!!

Postby Jest@ on Thu Oct 04, 2007 12:40 am

zombie@computer wrote:
Code: Select all
<input value="Search Tutorials" onclick="this.value=''" onblur="this.value='Search Tutorials'"/>

does exactly the same as those 200 lines of JS :P


Actually, it won't do quite the same thing, cos that code would so a search for 'Search Tutorials' every time you clicked the 'Go' button :P (it'd work if you pressed enter). Also, it would overwrite any user-entered text, which the current one doesn't (it only replaces the text with the default if you leave it blank)

Emailed blinkeh a fixaroo
Highlight to read:
It was earth all along
User avatar
Jest@
Veteran
Veteran
 
Joined: Mon Nov 22, 2004 1:50 am
Location: London UK

Postby zombie@computer on Thu Oct 04, 2007 5:19 am

Jest@ wrote:
zombie@computer wrote:
Code: Select all
<input value="Search Tutorials" onclick="this.value=''" onblur="this.value='Search Tutorials'"/>

does exactly the same as those 200 lines of JS :P


Actually, it won't do quite the same thing, cos that code would so a search for 'Search Tutorials' every time you clicked the 'Go' button :P (it'd work if you pressed enter). Also, it would overwrite any user-entered text, which the current one doesn't (it only replaces the text with the default if you leave it blank)

Emailed blinkeh a fixaroo
oh, sh, the unblur was wrong (needed to be onblur="if(this.value=='') this.value='Search Tutorials'". Meh
When you are up to your neck in shit, keep your head up high
zombie@computer
Forum Goer Elite™
Forum Goer Elite™
 
Joined: Fri Dec 31, 2004 5:58 pm
Location: Lent, Netherlands

Return to Web Design & Development

Who is online

Users browsing this forum: No registered users