Page 1 of 1

Probably easy javascript question

PostPosted: Tue Oct 02, 2007 8:35 pm
by Blink
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

PostPosted: Tue Oct 02, 2007 9:25 pm
by BlekksPoncho
: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.

PostPosted: Tue Oct 02, 2007 11:23 pm
by Jest@
erm, not sure entirely what you're trying to achieve...? The 'Search Tutorials' text is there for me from the start.

PostPosted: Wed Oct 03, 2007 12:22 am
by Tablespoon
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.

PostPosted: Wed Oct 03, 2007 12:27 am
by Jest@
Yeah, I got it now :D was confused..

btw, blinkeh posted the wrong bit of html at the bottom, fixed.

PostPosted: Wed Oct 03, 2007 7:01 am
by zombie@computer
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

PostPosted: Wed Oct 03, 2007 10:23 am
by BaRRaKID

PostPosted: Thu Oct 04, 2007 12:40 am
by Jest@
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

PostPosted: Thu Oct 04, 2007 5:19 am
by zombie@computer
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