CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

stkol76 Novice

26. januar 2010 - 08:56 Der er 10 kommentarer og
1 løsning

Expand input felt, afhængig af indhold

Hejsa,

Jeg er lidt uklar over om dette skal gøres via DHTML eller JavaScript, men tager changen at smide denne i JavaScript sektionen.

Jeg har to input felt som når der skrives i dem hver især skal de kunne udvide sig i bredden, det vil sige at hvis der bliver skrevet 3 bogstaver, så er den ikke bredder end de 3 bogstaver, og hvis det er 10 så udvider den sig til at kunne indeholde, 10 løbende som de bliver skrevet ind.

Er der nogen som kan hjælpe mig med dette? :-)

Mange hilsner

Stig :-)

Synes godt om

stkol76 Novice

26. januar 2010 - 10:18 #1

Hej igen,

Jeg har fundet det script jeg manglede MEN,MEN, MEN.. Jeg kan ikke få den til at opdatere resizingen, da den modtager input fra en anden felt.. Kan i hjælpe med dette problem?? :-)

Jeg har sammensat en lilledel fra den side jeg er ved at lave, til hvad der er relevant, her nedenfor :-)

___________________________________________

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript">
function reSizeField(field, e){
if (e && e.keyCode){
// document.getElementById('kc').value=e.keyCode; //diagnostic use only
if (e.keyCode>=36 && e.keyCode<=40 || e.keyCode==20 || e.keyCode==9) return;
}
var r=document.getElementById('resizer');
r.firstChild.nodeValue = field.value;
if (e && e.keyCode && e.keyCode!=46)
field.value = '';
field.style.width = Math.max(document.getElementById('reference').offsetWidth, r.offsetWidth)+'px';
if (e && e.keyCode && e.keyCode!=46)
field.value = r.firstChild.nodeValue;
}
</script>

</head>
<body>

<input id="reference" type="text" size="1" style="font-size:90%;font-family:sans-serif;border:none;position:absolute;top:-1000px;left:-1000px;visibility:hidden; width: 1px">
<span id="resizer" style="font-size:90%;font-family:sans-serif;position:absolute;top:-1000px;left:-1000px;visibility:hidden;"> </span>

<script>
function duplicateContent1() {
firstValue = document.getElementById('ip_pre1_1').value;
document.getElementById('ip_pre1_2').value = firstValue;
document.getElementById('ip_pre1_3').value = firstValue;
}
</script>

<script>
function duplicateContent2() {
firstValue = document.getElementById('ip_pre2_1').value;
document.getElementById('ip_pre2_2').value = firstValue;
document.getElementById('ip_pre2_3').value = firstValue;
}
</script>

<center>

<table width="450" border="1" cellspacing="0" cellpadding="2" bordercolor="#333333">
<tr>
<td>

<table width="450" border="0" cellspacing="4" cellpadding="4">
<tr>
<tr>
<td align="left"><font face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold; color:#333333">Gateway :</font></font><font color="#FF0000" face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold">*</font></td>
<td align="right"><font face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold; color:#333333"><input type="text" name="ip_pre1" id="ip_pre1_1" maxlength="3" onkeyup="duplicateContent1();" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right" value="<% if trim(Session("ip_pre1")) = "" then %><% else %><%=trim(Session("ip_pre1"))%><% end if%>">.<input type="text" name="ip_pre2" id="ip_pre2_1" maxlength="3" onkeyup="duplicateContent2();" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right" value="<% if trim(Session("ip_pre2")) = "" then %><% else %><%=trim(Session("ip_pre2"))%><% end if%>">.<input type="text" name="gate1" maxlength="3" value="<% if trim(Session("gate1")) = "" then %><% else %><%=trim(Session("gate1"))%><% end if%>" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right">.<input type="text" name="gate2" maxlength="3" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right" value="<% if trim(Session("gate2")) = "" then %>1<% else %><%=trim(Session("gate2"))%><% end if%>"></font></td>
</tr>
<tr>
<td align="left"><font face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold; color:#333333">IP Start :</font><font color="#FF0000" face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold">*</font></font></td>
<td align="right"><font face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold; color:#333333"><input type="text" id="ip_pre1_2" readonly="readonly" style="font-size:16px; color:#000000; font-weight:bold; background-color:#FFFFFF; width: 1px; border:hidden; text-align:right" onkeyup="reSizeField(this, event);" onmousemove="reSizeField(this, event);" onchange="reSizeField(this, event);">.<input type="text" id="ip_pre2_2" readonly="readonly" style="font-size:16px; color:#000000; font-weight:bold; background-color:#FFFFFF; width: 1px; border:hidden; text-align:right" onkeyup="reSizeField(this, event);" onmousemove="reSizeField(this, event);" onchange="reSizeField(this, event);">.<input type="text" name="ip_start1" maxlength="3" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right" value="<% if trim(Session("ip_start1")) = "" then %><% else %><%=trim(Session("ip_start1"))%><% end if%>">.<input type="text" name="ip_start2" maxlength="3" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right" value="<% if trim(Session("ip_start2")) = "" then %><% else %><%=trim(Session("ip_start2"))%><% end if%>"></font></td>
</tr>
<tr>
<td align="left"><font face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold; color:#333333">IP End :</font><font color="#FF0000" face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold">*</font></font></td>
<td align="right"><font face="Verdana, Geneva, sans-serif" style="font-size:14px; font-weight:bold; color:#333333"><input type="text" id="ip_pre1_3" readonly="readonly" style="font-size:16px; color:#000000; font-weight:bold; background-color:#FFFFFF; width: 1px; border:hidden; text-align:right" onkeyup="reSizeField(this, event);" onmousemove="reSizeField(this, event);" onchange="reSizeField(this, event);">.<input type="text" id="ip_pre2_3" readonly="readonly" style="font-size:16px; color:#000000; font-weight:bold; background-color:#FFFFFF; width: 1px; border:hidden; text-align:right" onkeyup="reSizeField(this, event);" onmousemove="reSizeField(this, event);" onchange="reSizeField(this, event);">.<input type="text" name="ip_end1" maxlength="3" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right" value="<% if trim(Session("ip_end1")) = "" then %><% else %><%=trim(Session("ip_end1"))%><% end if%>">.<input type="text" name="ip_end2" maxlength="3" style="font-size:16px; color:#000000; font-weight:bold; background-color:#6F0; width: 30px; text-align:right" value="<% if trim(Session("ip_end1")) = "" then %><% else %><%=trim(Session("ip_end2"))%><% end if%>"></font></td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

Synes godt om

intenz Novice

26. januar 2010 - 10:24 #2

Du bruger onkeyup til at starte eventen. Du kan prøve at ændre dem til onchange og se om det løser det.

Synes godt om

stkol76 Novice

26. januar 2010 - 11:29 #3

Hej intenz,

Der bruges både onkeyup, onmousemove og onchange.. Hvis jeg fjerner onkeyup og onmousemove og kun har OnChange, så hjælper det ikke!

Nogle forslag? :-)

/Stig :-)

Synes godt om

intenz Novice

26. januar 2010 - 11:49 #4

Jeg har lidt svært ved overskue din kode :) Du bør indsætte alle de der style elementer i klasser i stedet for at kode det direkte i HTML koden.

Nå, men som jeg forstår dig. Så virker din reSizeField funktion korrekt på det første felt, men ikke på de andre fordi du kopierer værdierne til dem gennem javascript.
Og du vil så gerne have, at de andre 2 felter får samme bredde som det første.

Er det korrekt?

Synes godt om

stkol76 Novice

26. januar 2010 - 12:06 #5

Det er næsten korrekt..

Det første felt, der hvor teksten bliver skrevet, skal ikke resizes, den skal have en fast width, men de 2 felter hvor teksten bliver populeret til skal derimod resize sig så den får den width som der bliver skrevet ind!

/Stig :-)

Synes godt om

intenz Novice

26. januar 2010 - 12:39 #6

Prøv at brug det er script i stedet:

Du skal så sætte den til onchange/onkeyup (vælg én) på de elementer man kan skrive i, ikke dem man kopierer til (slet de steder du har skrevet det deri).

Synes godt om

stkol76 Novice

26. januar 2010 - 12:50 #7

Skal jeg lave noget om selve input feltet?? Der er nemlig umiddelbart ingen ændringer :-)

Synes godt om

stkol76 Novice

26. januar 2010 - 13:18 #8

UNDSKYLD.. Jeg havde fuldstændig overset kommentaren til sidst!! Det virker nu ;-) 1000 tak for hjælpen!! smider du ikke et svar?

/Stig :-)

Synes godt om

stkol76 Novice

26. januar 2010 - 13:21 #9

Lige et sidste spørgsmål.. Nu har jeg valgt Onchange i stedet for OnKeyup, og jeg burde nok have brugt den sidste, men den ligger der allerede en function på, er der ikke noget med at man kan ligge 2 funktioner på én OnKeyUp?? Hvordan er det man gør det?

Det er disse :-)

onkeyup="duplicateContent1();"

onchange="reSizeField(this, event);"

Synes godt om

intenz Novice

26. januar 2010 - 13:31 #10

Jeg lægger et svar :)

Du kan tilføje flere funktioner til samme event ved at skrive dem efter hinanden sådan:
onkeyup="duplicateContent1(); reSizeField(this, event);"

Synes godt om

stkol76 Novice

26. januar 2010 - 13:32 #11

Supert, 1000 tak :-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS