Gå til innhold

Ferdig utfylt tekst-boks?

Tordenflesk

Anbefalte innlegg

Tordenflesk

Tordenflesk

Skrevet
Skrevet (endret)

Hei.

Jeg holder på å lage en enkel start-side for meg selv, og har satt opp søke-bokser for Google, Wikipedia og ISOHunt.

Jeg har nå knapper til høyre for boksene så jeg ser hvilken som er hvilken.

Jeg vil heller at det skal stå 'Google' i Google-boksen osv. og slippe knappen.

Hvordan løser jeg dette?

Endret av Tordenflesk
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Vindstille

Vindstille

Skrevet
Skrevet
Så bruker du noe javascript for å få det bort når folk klikker der.

9460877[/snapback]

Jepp

 

Noe sånt:

window.onload = clearField;

function clearField() {
var searchField = document.getElementById('searchtext');
var defaultText = searchField.value;
searchField.onfocus = function () {
 if (searchField.value == defaultText) {
 	searchField.value = '';
 }
 else {
 	searchField.select();
 }
};

searchField.onblur = function () {
 if (searchField.value == '') {
 	searchField.value = defaultText;
 }
};
}

Lenke til kommentar
Steinmann

Steinmann

Skrevet
Skrevet (endret)

Koden skal legges i en egen fil, og linkes inn via script elementet :)

 

<script type="text/javascript" src="js/clearfields.js"></script> i <head>

 

Rett fra hukommelse, mulig jeg skrev noe feil.

 

-

 

Her, siden du skal ha flere søkefelt med samme funksjonalitet ville jeg brukt en getElementByClass funksjon og så gjort det samme for alle.

 

Du finner garantert noe om du søker :)

Endret av Steinmann
Lenke til kommentar
Vindstille

Vindstille

Skrevet
Skrevet
Her, siden du skal ha flere søkefelt med samme funksjonalitet ville jeg brukt en getElementByClass funksjon og så gjort det samme for alle.

9461420[/snapback]

Er du sikker på at getElementsByClass funker i alle nettlesere? Mener å huske Opera nettop la til noe sånt i nettleseren sin, og Opera pleier å ligge et par hakk foran IE.

Lenke til kommentar
Vindstille

Vindstille

Skrevet
Skrevet

Hokkus, pokkus, fillijokkus!

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang="nb-no">

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>Something</title>

<script type="text/javascript">

window.onload = onLoadFunction;

function onLoadFunction() {

clearField('google');

clearField('wikipedia');

clearField('torrent');

 

}

function clearField(id) {

var searchField = document.getElementById(id);

var defaultText = searchField.value;

searchField.onfocus = function () {

if (searchField.value == defaultText) {

searchField.value = '';

}

else {

searchField.select();

}

};

 

searchField.onblur = function () {

if (searchField.value == '') {

searchField.value = defaultText;

}

};

}

</script>

</head>

 

<body>

<form action="http://www.google.com/search" method="get" accept-charset="utf-8">

<input id="google" type="text" value="Google" name="q">

<input type="submit" value="Submit">

</form>

 

<form action="http://www.wikipedia.org/search-redirect.php" method="get" accept-charset="utf-8">

<input type="hidden" name="language" value="en">

<input id="wikipedia" type="text" value="Wikipedia" name="search">

<input type="submit" value="Submit">

</form>

 

<form action="http://isohunt.com/torrents/" method="get" accept-charset="utf-8">

<input id="torrent" type="text" value="ISO Torrents" name="ihq">

<input type="submit" value="Submit">

</form>

</body>

</html>

Lenke til kommentar
Tordenflesk

Tordenflesk

Skrevet
  • Forfatter
Skrevet
Hokkus, pokkus, fillijokkus!

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang="nb-no">

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>Something</title>

<script type="text/javascript">

window.onload = onLoadFunction;

function onLoadFunction() {

clearField('google');

clearField('wikipedia');

clearField('torrent');

 

}

function clearField(id) {

var searchField = document.getElementById(id);

var defaultText = searchField.value;

searchField.onfocus = function () {

  if (searchField.value == defaultText) {

  searchField.value = '';

  }

  else {

  searchField.select();

  }

};

 

searchField.onblur = function () {

  if (searchField.value == '') {

  searchField.value = defaultText;

  }

};

}

</script>

</head>

 

<body>

<form action="http://www.google.com/search" method="get" accept-charset="utf-8">

<input id="google" type="text" value="Google" name="q">

<input type="submit" value="Submit">

</form>

 

<form action="http://www.wikipedia.org/search-redirect.php" method="get" accept-charset="utf-8">

<input type="hidden" name="language" value="en">

<input id="wikipedia" type="text" value="Wikipedia" name="search">

<input type="submit" value="Submit">

</form>

 

<form action="http://isohunt.com/torrents/" method="get" accept-charset="utf-8">

<input id="torrent" type="text" value="ISO Torrents" name="ihq">

<input type="submit" value="Submit">

</form>

</body>

</html>

9464364[/snapback]

Og jeg som ville lære det selv. :(

hehe

Lenke til kommentar
  • 3 uker senere...
d4rg0

d4rg0

Skrevet
Skrevet

Hei

 

Ville bare si at dere gjør det veldig tungvindt... Med alt for mye javascript for denne søte lille funksjonen.

 

Følgende vil virke lettere :

 

<input type='text' id="goooogle" value='Google - Do no Evil' onclick='this.value=""' onblur='if(value == "")value = "Google"; test(this.id)'/>

 

Og da kan en i script i headeren (eller ekstern fil) f.eks. ha følgende :

 

function test(id) {
 alert(id);
}

 

Bare for å vise at en ikke bruker opp "onblur" :)

Lenke til kommentar
Vindstille

Vindstille

Skrevet
Skrevet
hehe, den måtte vel komme ja...sorry.

men så send den til en funksjon da, eller la ajax overvåke siden som foreslått, men igjen, meningen var bare å vise at koden var litt lang i utgangspunktet.

9596942[/snapback]

Den lange koden er absolutt ikke unødvendig lang. Den er langt mer fleksibel, ryddig og ikke minst båndbreddebesparende siden ting bare trengs å defineres én gang på hele nettstedet (funksjonen trengs kun å bli lastet ned én gang, uansett hvor mange sider med denne funksjonaliteten man ser på).

 

Det er derfor, akkurat som med CSS, at man legger all skriptingen i egne filer.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...