Avatar billede gg Praktikant
23. marts 2011 - 18:13 Der er 10 kommentarer og
1 løsning

Resize inputfelt med javascript

Hejsa jeg har et inputfield

<input type="text" id="productline" name="productline">

Jeg modtage data via et sql kald og vil egentlig så gerne resize mit inputfiled afhængig af hvor stor strengen jeg modtager fra databasen er. Jeg har følgende kode

utils.reSizeField = function(id,fieldLength) {
        var field = document.getElementById(id);
                document.getElementById(id).style.setAttribute("width",fieldLength);
}

Hvis jeg f.eks har teksten: Udlæg, BEB porto 14ks a 90,-, 2008-10-29 ville jeg gerne have et input felt som nedenstående
[Udlæg, BEB porto 14ks a 90,-, 2008-10-29 ]
Men mit inputfield bliver alt for kort. Nogen der kan hjælpe ?
Avatar billede tjens Nybegynder
23. marts 2011 - 19:31 #1
input-felter styres med size. http://www.w3schools.com/tags/tag_input.asp
Prøv med:

document.getElementById(id).size=fieldLength;
Avatar billede gg Praktikant
23. marts 2011 - 20:40 #2
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
Avatar billede intenz Novice
23. marts 2011 - 20:57 #3
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
Avatar billede gg Praktikant
23. marts 2011 - 21:44 #4
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
Avatar billede intenz Novice
23. marts 2011 - 23:14 #5
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:


utils.reSizeField = function(id,fieldLength) {
        var pixelsPerLetter = 6;
        document.getElementById(id).style.width = fieldLength*pixelsPerLetter;
};


pixelsPerLetter = 6 forventer vi, at et tegn er 6 pixels bred.
Avatar billede tjens Nybegynder
23. marts 2011 - 23:16 #6
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.
Avatar billede intenz Novice
23. marts 2011 - 23:30 #7
#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 :)
Avatar billede olebole Juniormester
24. marts 2011 - 13:04 #8
<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>
Avatar billede tjens Nybegynder
24. marts 2011 - 16:22 #9
#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.
Avatar billede olebole Juniormester
24. marts 2011 - 17:32 #10
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)
Avatar billede olebole Juniormester
24. marts 2011 - 18:04 #11
Et lynhurtigt eksempel - bare for at vise princippet:


<style type="text/css">
.myInput {
    font: 11px tahoma, sans-serif;
}
</style>

<script type="text/javascript">
var i = 0;
var a = [
    "Lorem ipsum",
    "dolor sit amet",
    "consectetur adipiscing elit",
    "Aliquam condimentum risus sed",
    "nulla lacinia pretium",
    "Vestibulum ante",
    "ipsum primis in faucibus orci",
    "luctus et",
    "ultrices posuere cubilia Curae"
];
function insertSpan() {
    window.oSpan = document.createElement("span");
    oSpan.appendChild( document.createTextNode("\u00a0") );
    oSpan.className = "myInput";
    var css = oSpan.style;
    css.position = "absolute";
    css.left = css.top = "-10000px";
    document.getElementsByTagName("body")[0].appendChild(oSpan);
}
function fooBar() {
    if (typeof oSpan!="object") insertSpan();
    oSpan.firstChild.nodeValue = document.getElementById("foo").value = a[i++];
    document.getElementById("foo").style.width = oSpan.offsetWidth + "px";
   
    if (i>a.length-1) i = 0;
}
</script>

<p><input id="foo" class="myInput" type="text"></p>

<p><button onclick="fooBar()">Test</button></p>

Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester