Keskustelu: Nettisivujen teko: html input valuessa teksti, joka katoaa klikatessa

Yhä useammalla sivustolla olen nähnyt näitä inputteja, jossa lukee valuena esim. "Kirjoita kommentti.." ja klikatessa se teksti katoaa.

Miten se onnistuu, onko ihan lyhyt ja helppo juttu vai pitääkö se tehdä jotenkin javascriptillä tjsp.

Kiitos.

EDIT:

<input type="text" id="kikkeli" onclick="document.getElementById('kikkeli').value = '';" value="Tervehdys, ystäväni!">

En tarvikkaan vastausta, topic poistoon.

JavaScriptilla onnistuu. Tässä on yksi triviaali ratkaisu:

<input type="text" name="juttu" value="Kirjoita kommentti!" onfocus="if (this.value == this.defaultValue) this.value = '';" />

(Tyylikkäämmin onfocus-käsittelijä pitäisi asettaa sivun latautumisen jälkeen JavaScriptilla niin, että kaikki JS-koodi olisi erillään HTML:stä.)

Tähän nimenomaiseen ratkaisuun liittyy sellainen "ominaisuus", että jos käyttäjä jostain syystä kirjoittaa tekstikenttään tuon saman asian kuin alussa ("Kirjoita kommentti!"), tekstikenttä tyhjenee taas seuraavallakin klikkauksella. Muita ratkaisutapoja on vaikka kuinka monta.

Edit: Omassa ratkaisussasi on kaksi ongelmaa: tekstikenttä tyhjenee aina klikatessa (myös täytön jälkeen) mutta ei lainkaan silloin, kun käyttäjä siirtyy siihen tabilla. Lisäksi haet turhaan elementin id:n perusteella, kun this viittaa siihen jo valmiiksi.

onclick="this.value='';"

Metabolix tuossa jo mainitsikin eventeistä ja käsitteli editoinnissaan mahdollisia käyttötilanneongelmia. Alla eventti-ratkaisu, jossa sivun merkkaus ja toiminnallisuus on eroteltu tapahtumakuuntelijoiden avulla. Tässä on otettu huomioon myös tilanteet, joissa käyttäjä haluaa kirjoittaa tekstikenttään saman tekstin kuin mitä kentän ohjeteksti on, tai jättää jossain välissä kentän tyhjäksi, jolloin kenttään asetetaan taas ohjeteksti. (demo)

JS

/* coding=utf-8 */

// Autoclearing on?
var autoClear = true;
// Input element to control
var search;
// Default text for the input field
var defaultText = 'Search for...';

// Bind event listeners only after elements have been loaded
window.onload = function() {
    search = document.getElementById('search');

    if (search.addEventListener) {
        search.addEventListener('focus', prepareSearch, false);
        search.addEventListener('blur', resetSearch, false);
    } else if (search.attachEvent) {
        search.attachEvent('onfocus', prepareSearch);
        search.attachEvent('onblur', resetSearch);
    }
}

/**
 * Clears the search box when
 * user wants to enter keywords
 */
function prepareSearch(e) {
    if (autoClear) {
        search.value = '';
        autoClear = false;
    }
}

/**
 * Ensures there are instructions in the
 * search box always when it is empty
 */
function resetSearch(e) {
    if (search.value.replace(/^\s+/, '') === '') {
        search.value = defaultText;
        autoClear = true;
    }
}