[Javascript&C#] tekstbox ledigen bij aanklikken

[Verwijderd]

Iets zeer simpel maar het lukt me niet...

Ik heb een tekstvak met daarin een beschrijving van wat de gebruiker zou moeten tikken in desbetreffend vak.

Ik zou willen dat eenmaal de gebruiker effectief het tekstvak aanklikt om te beginnen typen, dat de uitlegtekst verdwijnt.

Ik maak gebruik van ASP.NET met C# en heb volgende code in pageload :

txtBeschrijving.Attributes.Add("onClick", "document.getElementByID('" + txtBeschrijving.ClientID + "').value = ''");


dit genereerd volgende code in html :

<input name="ctl00$ContentPlaceHolder1$txtBeschrijving" type="text" value="vul hier een beschrijving in voor een nieuw item" id="ctl00_ContentPlaceHolder1_txtBeschrijving" onClick="document.getElementByID('ctl00_ContentPlaceHolder1_txtBeschrijving').value = ''" style="width:352px;" />

alles error krijg ik iets in de volgende vorm:

Deze eigenschap of methode wordt niet ondersteund door het object

Iemand enig idee wat ik verkeerd doe?

Alvast vriendelijk bedankt

[Verwijderd]

Ik heb eerlijk gezegd niet eens de moeite genomen om je 'gegenereerde' tekstvak te bekijken.
Wellicht heb je al een oplossing?

<input type="text" name="mijnVeld" id="quickSearch"
value="vul hier maar wat in" onclick="clearField('quickSearch')">


In je js file zet je dit neer:
function clearField(fieldId) {
document.getElementById(fieldId).value='';
}

Werkt in ie/ff/opera/ff mac

Nog netter zou zijn om de betreffende tekstvakken 'op te halen' middels javascript en dan
het onclick event er aan te koppelen zodat je je scripts en html gescheiden houdt.

[ Voor 4% gewijzigd door Verwijderd op 06-12-2007 23:09 ]

[Verwijderd]

Verwijderd schreef op donderdag 06 december 2007 @ 23:05:
...

Nooit van this gehoord? onclick="this.value='';" of onfocus="this.select();"

[ChessSpider]

En volgens mij is fout in jouw code dat de gegenereerde code
getElementByID
is, terwijl het
getElementById
moet zijn... Ik vind dat gegenereerde spul er trouwens niet erg mooi uitzien

[ Voor 1% gewijzigd door ChessSpider op 06-12-2007 23:12 . Reden: Moet ik het niet zelf fout gaan doen natuurlijk (GetElement => getElement) ]

[Verwijderd]

ehh... ja

[Verwijderd]

Verwijderd schreef op donderdag 06 december 2007 @ 23:07:
[...]

Nooit van this gehoord? onclick="this.value='';" of onfocus="this.select();"

bedankt!
ik deed het weer veel te moeilijk

[Cloud]

Verwijderd schreef op vrijdag 07 december 2007 @ 08:07:
bedankt!
ik deed het weer veel te moeilijk

Er zit een control in de Ajax Toolkit die precies doet wat jij hier zelf aan het bouwen bent.

TextBoxWatermark

Kan interessant zijn voor je

[SuperRembo]

Verwijderd schreef op donderdag 06 december 2007 @ 23:07:
[...]

Nooit van this gehoord? onclick="this.value='';" of onfocus="this.select();"

Ja, da's handig. Elke keer dat je in het veld klikt wordt 't leeg gemaakt. hanig als je een typefout wil verbeteren

[7.01D]

De fraaiste methode is toch die beschreven wordt in Making compact forms more accessible op A List Apart.
Daarbij wordt geen gebruik gemaakt van een default value, maar wordt het label over de <input> geplaatst d.m.v. CSS en JavaScript. Maakt gebruik van onubtrusive JavaScript (als JS disabled is staat je label weliswaar voor of boven je <input> i.p.v. dat het er boven hovert en de gebruiker hoeft niet eerst de default value te verwijderen).

[PolarBear]

ChessSpider schreef op donderdag 06 december 2007 @ 23:11:
En volgens mij is fout in jouw code dat de gegenereerde code
getElementByID
is, terwijl het
getElementById
moet zijn... Ik vind dat gegenereerde spul er trouwens niet erg mooi uitzien

Wat is er zo mis met dat gegenereerde spul? Ben erg benieuwd.

[Gurbe de n00b]

Vrij ranzig en behoorlijk wat overhead over het algemeen. Maar het scheelt je wel veel ontwikkeltijd

[PolarBear]

code:

<input name="ctl00$ContentPlaceHolder1$txtBeschrijving" type="text" value="vul hier een beschrijving in voor een nieuw item" id="ctl00_ContentPlaceHolder1_txtBeschrijving" onClick="document.getElementByID('ctl00_ContentPlaceHolder1_txtBeschrijving').value = ''" style="width:352px;" />

Wat is hier dan echt ranzig aan en veel overhead...

[ChessSpider]

PolarBear schreef op dinsdag 18 december 2007 @ 10:35:

code:

<input name="ctl00$ContentPlaceHolder1$txtBeschrijving" type="text" value="vul hier een beschrijving in voor een nieuw item" id="ctl00_ContentPlaceHolder1_txtBeschrijving" onClick="document.getElementByID('ctl00_ContentPlaceHolder1_txtBeschrijving').value = ''" style="width:352px;" />

Wat is hier dan echt ranzig aan en veel overhead...

Persoonlijke voorkeur?

Ik vind de name er niet echt duidelijk en/of mooi eruit zien.
Waarom wil je perse de preciese motivatie weten waarom ik iets niet mooi vind?

[PolarBear]

Mooi of niet mooi is inderdaad een mening, maar om het ranzig en veel overhead te noemen. Ik zie dat laatste er echt nie tin.

[Verwijderd]

een lange functienaam of element id of naam zorgt niet voor tragere code, wanneer zien mensen dat nu eens
$ is niet sneller dan document.getElementById, integendeel...

[Jan_V]

Een textbox met lange teksten in de name en/of id attributen is inderdaad niet echt mooi naar mijn mening. Persoonlijk zou ik ook liever zien dat er alleen txtBeschrijving (om dit voorbeeld te nemen) zou staan.
Met master-pages wordt het id en name veld echter automatisch/default hernoemd naar iets zoals hierboven is te zien. Eerst had ik dit zelf niet door, dus zocht ik met Javascript naar id's die ik de controls had gegeven. Toen deze niet konden worden gevonden zag ik dat er een enorm lange id stond.

Kun je deze automatische/default actie ook uitschakelen? Zo ja, geeft dat ook nog verdere problemen in je pagina/applicatie of maakt het niets uit?
Ik heb zelf (nog) niet gezocht of dit mogelijk is, omdat ik nu weet dat het zo werkt en ik me er verder niet meer aan stoor. Echter als het uit gezet kan worden, zou wel makkelijk zijn en mooier voor de code leesbaarheid.

[Mephix]

De naam wordt in dit geval gegenereerd door de INamingcontainer.. kun je niets aan doen, want die naam heeft de codebehind nodig om te bepalen welk control aangeklikt is.

Voorbeeldje: een grid met delete knoppen. In je design geef je maar 1 knop de naam "delete" maar om na de databind een onderscheid te maken, genereerd .net de naam in de vom van control$child$rowX$delete.

Nnway, kijk ook ff bij \[JS/ASP.Net] button disablen je zou dit op dezelfde manier kunnen doen.

[ Voor 39% gewijzigd door Mephix op 23-12-2007 17:56 ]