CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Beregning af sum via PHP og SQL Af dane022 i JavaScript 3 10/02/202421:38 12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript 2 27/12/202321:42 28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript 12 19/12/202313:31 10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript 2 19/10/202307:02 20/10/202307:02
js til asp backend Af keepy i JavaScript 1 11/10/202310:28 11/10/202313:46
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
44 min siden Fjerne adgangskode Af Geo" søster i Andet sikkerhed
I dag 16:44 sletning af en årgang billeder i dropbox Af valsbol i Cloudtjenester
I dag 14:54 Skrive tekst fra celle i formel Af SFrede i Excel
I dag 14:48 skanner Af Dittelit i Andet hardware
I dag 14:26 Opdatering af SAPgrid værdi Af dane022 i Visual Basic
White papers
Flere white papers »


Premium
Teaser billede
Om få måneder lægger Microsoft det klassiske Teams i graven
Læs mere »
Danske myndigheder skal slippe alt, hvad de har i hænderne og patche nu: Hackere udnytter alvorlige sårbarheder i Ciscos firewalls
Sådan vil Niras anvende medarbejder-data og AI til løn-regulering og stress-håndtering
BEC varsler prisstigninger for sine kunder: Medarbejderne skal have mere i løn
Se alle »
Computerworld
Teaser billede
På tur i BMW's mægtigste elbil: Sådan er livet ombord i en monumental million-ellert
Læs mere »
Porno-giganterne Pornhub og XVideos skal indlevere materiale til EU
En hyldest til klodens snedigste tablet-design: Nu er fremtiden for Microsofts hardware endnu mere uvis
Nørgaard: Som jeg altid har sagt: Man ansætter altid nye folk på udseendet, for det er det eneste, som en kandidat ikke kan fuske med
Se alle »
CIO
Teaser billede
Nu kan mange flere opgradere deres gamle Windows 10-pc'er til Windows 11: Se om du kan opgradere
Læs mere »
På denne dato er det slut med udbredte versioner af Office: Microsoft vil have dig over på de dyrere E3-licenser
Tidligere Chr. Hansen-CIO Jens Rasmussen løfter sløret efter exit: Her er mit næste skridt i karrieren
Besvarer forsikringsspørgsmål på 20 sekunder: Sådan er Topdanmarks nye generative AI-chatbot blevet udviklet på et halvt år
Se alle »
Job & Karriere
Teaser billede
NNIT flytter til det centrale København: Her er selskabets nye hovedkvarter
Læs mere »
Knap 40 procent af disse it-folk tjener tjener mindst 57.000 kroner om måneden
Så meget tjener dine kollegaer: Her er alle data fra Computerworlds store it-lønstatistik for 2024
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Se alle »
White paper
Teaser billede
Cybersikkerhed: Skær antallet af alarmer ned fra tusindvis til blot en håndfuld
Læs mere »
Guide: Sådan udvikler du en moderne netværksstrategi
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Vejen væk fra WAN: Sådan skifter du til en moderne infrastruktur
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »