input text veld moet doorverwijzen naar html pagina --> <input>.html

Status
Niet open voor verdere reacties.

Example5

Terugkerende gebruiker
Lid geworden
9 mrt 2008
Berichten
2.172
Goedemiddag,

Ik zit te knutselen aan een persoonlijke website maar ben niet zo heel sterk in webtalen.

Ik probeer een hele simpele index pagina te maken (in html 5, css en javascript) met enkel een input textbox. Wanneer een gebruiker een woord invult in de textbox en enter drukt, moet hij automatisch doorverwezen worden naar een pagina gebaseerd op zijn input.
Bijvoorbeeld: als de gebruiker het woord 'hallo' intypt en enter drukt, wil ik dat het doorverwezen wordt naar pagina 'hallo.html'.
De textbox moet bij voorkeur geen borders hebben en de achtergrond moet transparant zijn (dus als mijn pagina groen is, moet de textbox geen borders hebben en een groene achtergrond, hij moet dus 'onzichtbaar' zijn).

Als iemand mij met bovenstaande verzoek op weg zou willen helpen zou dat erg gewaardeerd worden! Mocht iemand het verschrikkelijk leuk vinden om dit te doen en zelfs iets meer uitdaging geen probleem vinden, heb ik additioneel een aantal functies die niet direct van belang zijn, maar wel erg gewensd:
- De textbox moet direct geactiveerd zijn als de gebruiker op de pagina komt (dus wanneer de index.html geladen wordt, en de gebruiker begint te typen, typt hij direct in de textbox)
- De textbox moet de volledige <div> in beslag nemen (100% width en height)
- Het # teken moet aan het begin van de input blijven staan (vergelijkbaar met een cmd.exe scherm altijd een 'C\...>' heeft, echter wil ik enkel het teken '#' in plaats van 'C\...>')

Alvast enorm bedankt voor de moeite, als je vragen hebt over mijn verzoek hoor ik dat natuurlijk graag.
 
Laatst bewerkt:
Een opzetje die je zelf verder kan afmaken :)
Code:
<div id="url">
  <form id="urlform" onsubmit="GotoUrl()">
    <span>#</span><input id="urlinput" type="text" value="">
  </form>
</div>

<script type="text/javascript">
var myForm  = document.getElementById("urlform");
var myInput = document.getElementById("urlinput");
myInput.focus();
function GotoUrl() {
  myForm.action = "http://www.example.nl/subdir/" + myInput.value + ".html";
  myForm.submit();
}
</script>

#url {
  position: relative;
}
#url form,
#url input {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  font: normal 16px sans-serif;
  line-height: 1.4;
  background-color: transparent;
  color: #00f;
}
#url form {
  display: block;
}
#url span {
  position: absolute;
  top: 7px;
  left: 5px;
}
#url input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 36px;
  padding: 0 16px;
}

Verander http://www.example.nl/subdir in het goede pad van je website.

Suc6. Have fun.
 
Laatst bewerkt:
Doet precies wat ik wil, dank je voor de hulp :). Ik ga even puzzelen om te proberen het veld 100% pagina-vullend te maken
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan