Avatar billede 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 :-)
Avatar billede 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>
Avatar billede 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.
Avatar billede 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 :-)
Avatar billede 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?
Avatar billede 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 :-)
Avatar billede intenz Novice
26. januar 2010 - 12:39 #6
Prøv at brug det er script i stedet:

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 = '';
MyWidth = Math.max(document.getElementById('reference').offsetWidth, r.offsetWidth);

if (field.id == 'ip_pre1_1') {
    myField = document.getElementById('ip_pre1_2');
    myField.style.width = MyWidth+'px';

    myField = document.getElementById('ip_pre1_3');
    myField.style.width = MyWidth+'px';
}

if (field.id == 'ip_pre2_1') {
    myField = document.getElementById('ip_pre2_2');

    myField.style.width = MyWidth+'px';

    myField = document.getElementById('ip_pre2_3');
    myField.style.width = MyWidth+'px';
}

if (e && e.keyCode && e.keyCode!=46)
field.value = r.firstChild.nodeValue;
}



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).
Avatar billede stkol76 Novice
26. januar 2010 - 12:50 #7
Skal jeg lave noget om selve input feltet?? Der er nemlig umiddelbart ingen ændringer :-)
Avatar billede 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 :-)
Avatar billede 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);"
Avatar billede 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);"
Avatar billede stkol76 Novice
26. januar 2010 - 13:32 #11
Supert, 1000 tak :-)
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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