Resize inputfelt med javascript

input-felter styres med size. http://www.w3schools.com/tags/tag_input.asp
Prøv med:

document.getElementById(id).size=fieldLength;

tjens>> Jeg kan godt sætte size, men problemet består i jeg skal have sat længden så den passer med længden af en streng jeg har modtaget via det database kalde

Der er ikke noget ligetil måde at beregne længden er en streng i pixels.

Prøv at beskriv lidt bedre hvad du har gjort, og hvad du gerne vil. Vi kan ikke læse dine tanker.

Hvordan har du 'modtaget' det fra databasen? I javascript? php?
Hvad hedder variablen hvori det data ligger?
Står den måske i input feltet allerede?

Hvordan/hvor kalder du den funktion du har copy/pasted ind?

Du kan tællle hvor mange tegn teksten er på:
I PHP: strlen();
I java script: variabel.length

Ok jeg har forskellige teknologier i spil:
Backend = Java /Spring
Database = MySQL
Frontend = HTML/JSP/YUI, DWR og JavaScrpt


*** HTML ***
<input type="text" id="productline" name="productline" title="Varelinjebeskrivelse"><br><br>


*** Kald fra YUI/JavaScript ***
var setProductLineInformation = function() {  YAHOO.utils.reSizeField('productline',YAHOO.State.getProductLine().length);
        dwr.util.setValue("productline",YAHOO.State.getProductLine());
    };

Det der sker i ovenstående kode er et kald til JavaScript funktionen repsizeField funktionen med html elememnt samt længden på strengen der skal vises i mit inputfield. Derefter indswættes værdien af stregen i inputfeltet. DWR benyttes til dette.


*** Util funktion, der definerer længden af inputfield ***
utils.reSizeField = function(id,fieldLength) {
        var field = document.getElementById(id);
        document.getElementById(id).size = fieldLength;

};
Ovenstående funktion skal ud fra længden af en modtaget streng dynamisk definere længden af inputfeltet, dvs. inputfeltet ændrer sig dynamisk.

Udfordringen består netop i at beregne længden er en streng i pixels. F.eks. er en modtaget streng: OPHÆNG AF REOL dsvs. 14 karakterer. Mit inpuut felt viser kun OPHÆNG AF REO. Hvis jeg vil se resten af strengen skal jeg klikke på inputfeltet og bruge pil til højre for at se resten af strengen

Ah okay :) Så er du jo langt i forvejen.

Som skrevet, er det ikke særlig nemt at gøre præcist. Du kan se mulige løsninger her:
http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript

I praksis (med mindre det var meget vigtigt for dig), ville jeg gætte på et størrelse.

Din 'reSizeField' funktion kunne se sådan ud:



pixelsPerLetter = 6 forventer vi, at et tegn er 6 pixels bred.

Man kan desværre ikke aflæse længden i pixels af teksten i en input, fordi value ikke er/har en childNode.

Du bliver nødt til at nøjes med at sætte SIZE = strengens længde.

Når dine data er tastet uppercase må du nok bare lægge et par tegn eller en % til længden.

#6
Jeg ville til enhver tid vælge width over size, men okay :)

Det link jeg postede i #5 viser hvordan 'pixel size' kan beregnes, med et css/javascript hack. Formegentlig overkill i de fleste situationer men alligevel :)

<ole>

Indsæt et skjult span i siden. Du kan skjule det ved at positionere absolute og lægge det langt udenfor siden (-10000px, -10000px) - eller du kan give det visibility:hidden.

Fyld teksten i spannet og spørg på dets offsetWidth. Læg 4-6px til for input elementets medfødte padding/border - og giv til slut input elementet den fundne bredde. Easy as that  =)

/mvh
</bole>

#8 Den løsning testede jeg i går, men gik i stå, fordi span-feltet ikke fik samme font som input-feltet.

Dermed passede de aflæste pixels stadig ikke med input-feltet:

Sans-serif gav for langt span, og sans-serif small blev for kort.

Derfor konkluderede jeg at size = antal karakterer + lidt ekstra var lige så godt.

#7 Mit indlæg #6 var ikke en reaktion på #5: Der er skevet ca. samtidig.

Det styrer du selv. Hvis du bare sørger for at give input og span element samme styles, giver det ingen problemer. Problemet opstår kun, hvis du ikke style dine inputfelter med hensyn til font - men overlader dem til at styre sig selv. Det bør man ikke gøre.

Programmering/kodning er en rendyrket fascistisk disciplin. Alt skal underlægges benhård, minutiøs styring - og al autonomi er bandlyst!

Derfor har jeg det så fedt med programmering ... modsætninger mødes  *o)

Et lynhurtigt eksempel - bare for at vise princippet: