Miten saan tehtyä tekstikentän automaattisen tyhjennyksen sitä klikattaessa (ja mahdollisimman yksinkertaisesti) HTML:lässä?
<input onclick="this.value='';" value="klikkaa tätä" />
Aika typerä ominaisuus. Halusitko kuitenkin vaikka tällaisen?
<input placeholder="Kirjoita tähän jotain." />
Kokeilitko heittää Googleen 'html form reset' .
Ilmeisesti et, sillä muutoin olisit löytänyt tällaisein maagisen komennon:
<input type="reset" value="Reset!">
dartvaneri kirjoitti:
<input type="reset" value="Reset!">
Tämä on kyllä useinmiten vieläkin typerämpi ominaisuus kuin tuo Metabolixin esittämä.
Metabolix kirjoitti:
<input onclick="this.value='';" value="klikkaa tätä" />
Etin just tuota ekaa koodia :). Oon tekemässä googlesta versiota, jossa haku tulee uuteen sivuun, joten tämä on todella hyödyllinen toiminto! Kiitos!
Ohops, nyt tuli mulla lukuvirhe paholainen. :)
JuustoPala kirjoitti:
Miten saan tehtyä tekstikentän automaattisen tyhjennyksen sitä klikattaessa (ja mahdollisimman yksinkertaisesti) HTML:lässä?
Jotenki hämärästi tajusin, että 'sitä tyhjennys painiketta klikatessa', vaikka eihän tuolla mistään painikkeesta puhuta.
JuustoPala kirjoitti:
Metabolix kirjoitti:
<input onclick="this.value='';" value="klikkaa tätä" />Etin just tuota ekaa koodia :). Oon tekemässä googlesta versiota, jossa haku tulee uuteen sivuun, joten tämä on todella hyödyllinen toiminto! Kiitos!
Tosi hyödyllinen juu esimerkiksi silloin, kun käyttäjä on kirjoittanut kenttään huolellisesti muotoillun hakulausekkeen, käy vielä jossain toisessa ikkunassa tarkistamassa jotain ja sitten klikkaa…
Yucca kirjoitti:
JuustoPala kirjoitti:
Metabolix kirjoitti:
<input onclick="this.value='';" value="klikkaa tätä" />Etin just tuota ekaa koodia :). Oon tekemässä googlesta versiota, jossa haku tulee uuteen sivuun, joten tämä on todella hyödyllinen toiminto! Kiitos!
Tosi hyödyllinen juu esimerkiksi silloin, kun käyttäjä on kirjoittanut kenttään huolellisesti muotoillun hakulausekkeen, käy vielä jossain toisessa ikkunassa tarkistamassa jotain ja sitten klikkaa…
Jep, varmaan kuitenkin pitäisi olla jokin pienehkö if-lause, joka tyhjäisi tiedot vain siinä tapauksessa, että valuena olisi "oletusteksti"... :D
placeholder?
qeijo kirjoitti:
placeholder?
lainaus:
Note: The placeholder attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.
Siinä ei testattu idean alku:
<!DOCTYPE html>
<html>
<head>
<title>Placeholderi(sh)!</title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input type="text" placeholder="Hakusana" />
<script>
$(document).ready(function() {
if (!('placeholder' in document.createElement('input'))) {
$(document).find('[placeholder]').each(function() {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder-emulator');
});
$('.placeholder-emulator').focus(function() {
if ($(this).val() == $(this).attr('placeholder'))
$(this).val('');
});
$('.placeholder-emulator').blur(function() {
if ($(this).val() == '')
$(this).val($(this).attr('placeholder'));
});
}
});
</script>
</body>
</html>Onko nyt järkeä tyrkyttää sitä placeholderia, kun kysyjä jo sanoi, ettei se vastaa tavoitetta?
Sen sijaan ideaa voisi muuttaa niin, että laatikko tyhjennettäisiin vain silloin, kun painetaan nappia ja avataan uusi hakusivu. Se olisi kaikin puolin paljon loogisempaa.
Inhoan joillakin sivuilla tätä automaattista tyhjennystä. Ainakin jossain vaiheessa Hintaseuranta teki sitä, tosin variaatiolla "kun hakulaatikko saa fokuksen". Käytännössä usein kävi sitten niin, että kirjoitin jo hyvän matkaa tuotteen nimeä laatikkoon kun koodi keksi, että sivu on nyt kokonaan ladattu ja täräytti fokuksen manuaalisesti hakulaatikkoon... eli kenttä tyhjeni kesken kirjoittamisen. Sama voi tapahtua tämän klikkauksen kanssa jos minun tarvitsee käydä jossain tarkistamassa hakusanan kirjoitusasu ja sitten klikkaan eri kohtaan sanaa kun huomaan jotain korjattavaa. Kah kun kenttä tyhjenee nätisti kokonaan.
Eli kun lisätään uusi toiminto, niin ei sitten heikennetä samalla käyttökokemusta, kiitos.
Metabolix kirjoitti:
Onko nyt järkeä tyrkyttää sitä placeholderia, kun kysyjä jo sanoi, ettei se vastaa tavoitetta?
Placeholderiahan AP tässä haluaa. Kyse taitaa olla rajallisesta ymmärryksestä sen toiminnasta.
The Alchemist kirjoitti:
Placeholderiahan AP tässä haluaa. Kyse taitaa olla rajallisesta ymmärryksestä sen toiminnasta.
Tai ehkä sinun ymmärryksesi kysymyksestä on rajallinen. Olisi hyödytöntä tehdä Google-hausta omaa versiota, jos sen toiminta olisi sama kuin tavallisen Google-haun. Niinpä haun tuleminen ”uuteen sivuun” ei selvästi tarkoita vain uutta HTML-dokumenttia vaan jotain tavallisesta poikkeavaa, luultavasti uutta tabia tai uutta ikkunaa. Selvästikin sama kenttä on silloin tarkoitus täyttää monta kertaa ja tyhjentää näiden kertojen välissä.
Lisäksi voi toivoa, että kysyjä jo kokeili placeholderia jo keskustelun alussa, kun itse ehdotin sitä (ennen kuin käyttötarkoitusta selitettiin).
No ihan sama, edelleen vika on muualla kuin minussa. Hakusanan tyhjennys tekstikenttää klikattaessa on huonoa suunnittelua, koska hakusanaa voi joutua korjaamaan tai täsmentämään, jolloin kentän tyhjentäminen on viimeinen asia, mitä haluaisi tapahtuvan.
Metabolix kirjoitti:
Olisi hyödytöntä tehdä Google-hausta omaa versiota, jos sen toiminta olisi sama kuin tavallisen Google-haun.
Mutta onko jostakin pääteltävissä, että tässä ollaan tekemässä jotain hyödyllistä? Kysymyksessähän lähdetään oletetusta ratkaisusta johonkin ongelmaan, jota ei kerrota, ja kysytään miten sen voisi toteuttaa, ja vielä rajataan vaihtoehdot (tehtävä ”HTML:lässä”) niin, että placeholder on ainoa mahdollisuus.
Yleensähän Google-hakujen omat versiot ovat toiminnallisuudeltaan huonompia kuin Googlen omat hakulomakkeet ja lisäksi lakkaavat kokonaan toimimasta, kun Google kääntää jonkin bitin sopivasti poikittain.
Tässä siis kannattaisi alkuperäisen kysyjän kertoa, mitä hän oikein on tekemässä, näyttää jotain siitä, mitä on jo valmiina (URL olis kiva), ja sitten selittää, millaisen parannuksen hän haluaisi tehdä.
Jos halutaan, että lomakkeen tekstikentän saa kätevästi ja ongelmitta tyhjennettyä (siis ei alkuarvoon, vaan tyhjäksi), niin sopivin keino on painike, jonka klikkaaminen tyhjentää juuri kyseisen kentän. Ja painike tietysti pitää generoida JavaScriptillä, jotta sivulla ei lilluisi toimimaton painike silloin, kun JavaScript ei ole käytössä (koska sen toiminnallisuus täytyy tehdä sillä).
Aihe on jo aika vanha, joten et voi enää vastata siihen.