Avatar billede bibliotekarens Nybegynder
12. april 2006 - 16:32 Der er 26 kommentarer og
1 løsning

hjælp til at få næsteknappen i fokus når feltet er udfyldt

jeg er stadig i gang med nogle spss-templates - nu kunne jeg godt tænke mig at få "næste"-knappen i fokus når feltet er udfyldt - af sig selv stiller den sig i "tilbage"-knappen hvilket virker lidt bagvendt.

jeg har allerede følgende scripts:
          <script type="text/javascript" language="javascript">
        a=0;
        function txtctrl(){
            if(document.getElementById("_Q0")){
                  if(document.getElementById("_Q0").value!=""){
                      document.getElementById("_Q0").style.backgroundColor="rgb(220,220,220)";}
                      else document.getElementById("_Q0").style.backgroundColor="white";
            }
        }
        function txtctrlinit(){
            txtctrl();setTimeout("txtctrlinit(a);",100);
        }
        function txtfocusit(){
            if(document.getElementById("_Q0")){
                  document.getElementById("_Q0").focus();}
                else setTimeout("txtfocusit();",100);
        }       
        </script>


og så  <body onLoad="txtctrlinit();txtfocusit();">

knapperne, som jeg ikke har adgang til at skrive i, ser således ud:

<input type="submit" name="_NPrev" class="mrPrev" style="width: 70px;" value="Tilbage" alt="Tilbage"></input>
<input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Næste" alt="Næste"></input>

På en side kan der være et inputfelt, en radiobutton-fidus eller et tekstarea.

håber nogen kan hjælpe!
Avatar billede mclemens Nybegynder
12. april 2006 - 17:21 #1
Virker det her? eller skal tilbage være en submit knap,
hvis den skal det kan den i nedenstående rettes til:

<input type="button" onclick="this.form.submit();" name="_NPrev" class="mrPrev" style="width: 70px;" value="Tilbage" alt="Tilbage"></input>


...forkortere lige mit tidligere script lidt og fjernede den body onload ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--

tmpnode="";
window.onload=function(){
  if(tmpnode=document.getElementById("_Q0")){
    tmpnode.focus();
    setInterval("txtctrl();",100)
  }
}

function txtctrl(){
  tmpnode.style.backgroundColor=(tmpnode.value!="")?"rgb(220,220,220)":"white";
}
   
//-->
</script>

</head>

<body>

<form>

<textarea id="_Q0"></textarea>

<input type="button" name="_NPrev" class="mrPrev" style="width: 70px;" value="Tilbage" alt="Tilbage"></input>

<input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Næste" alt="Næste"></input>

</body></html>
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 17:34 #2
Hej
fedt du gider hjælpe igen!

jeg får det der lille gule fejlikon forneden...
doctypen er i øvrigt ikke længere html men:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

skal de her være udenom? <!--    //-->

i øvrigt har jeg slet ikke adgang til at ændre i de der button-tags. jeg tænkte at man måske kunne sige noget lignende:
hvis (et eller andet)isset
så flyt fokus til name="_NNext"

men jeg kan jo ikke javascript... :-)
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 17:37 #3
kan du i øvrigt huske sidst? du fik lavet en fin funktion:
function tableit() {f1="#fff";f2="#797874";
  document.body.innerHTML=document.body.innerHTML.replace(/<tr/gi, "<tr onMouseOver=\"style.backgroundColor='"+f2+"';\" onMouseOut=\"style.backgroundColor='"+f1+"';\"");
}

der virkede fint! den duer ikke mere - kan det være fordi det nu er en anden doctype?
Avatar billede mclemens Nybegynder
12. april 2006 - 17:58 #4
[ jeg får det der lille gule fejlikon forneden...
doctypen er i øvrigt ikke længere html men: ]
- den kodning jeg kom med giver ikke en fejl selvom du skifter doctypen...
du må have noget andet der laver fejl... du har vel fjernet onload
fra body tagget hvis du brugte ovenstående script...
(evt. et link? eller test eksempel der giver fejl)

[ der virkede fint! den duer ikke mere - kan det være fordi det nu er en anden doctype? ]
den tableit kigger jeg lige på :P
ja, innerHTML er ikke så tilladt i xhtml :/
... dog virker denne uden advarsel hos mig :/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>
<script language="javascript">

window.onload=function(){tableit();}

function tableit() {f1="#fff";f2="#007874";
  document.body.innerHTML=document.body.innerHTML.replace(/<tr/gi, "<tr onMouseOver=\"style.backgroundColor='"+f2+"';\" onMouseOut=\"style.backgroundColor='"+f1+"';\"");
}
</script>
</head>

<body>

<table>
<tr><td id="CellId0">abc</td></tr>
<tr><td id="CellId1">abc</td></tr>
<tr><td id="CellId2">abc</td></tr>
<tr><td id="CellId3">abc</td></tr>
</table>
<br />
<table>
<tr><td id="CellId4">abc</td></tr>
<tr><td id="CellId5">abc</td></tr>
<tr><td id="CellId6">abc</td></tr>
<tr><td id="CellId7">abc</td></tr>
</table>
</body></html>
Avatar billede mclemens Nybegynder
12. april 2006 - 18:00 #5
[ skal de her være udenom? <!--    //--> ]
Til at skjule scripts fra gamle browsere, burde ikke være nødvendig mere...

[ i øvrigt har jeg slet ikke adgang til at ændre i de der button-tags. jeg tænkte at man måske kunne sige noget lignende: hvis (et eller andet)isset så flyt fokus til name="_NNext" ]
det kunne godt tænkes at det kunne gøres :P
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 18:12 #6
nå jo - jeg glemte at slette de det body onload - så det med cursoren og baggrundsfarven virker fint nu :-)
Avatar billede mclemens Nybegynder
12. april 2006 - 18:28 #7
kigger på alle tingene p.t. ... men det tager et stykke tid :/
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 19:02 #8
iiih hvor er du en helt!!!
Avatar billede mclemens Nybegynder
12. april 2006 - 19:11 #9
Lige en status update...
mangler lige de buttoms...

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>Ingen titel</title>

<script type="text/javascript">
<!--

tmpnode="";tabletmpnodes=""

window.onload=function(){

  if(tmpnode=document.getElementById("_Q0")){
    tmpnode.focus();
    setInterval("txtctrl();",100)
  }

  if(tabletmpnodes=document.getElementsByTagName("table")){
    tableit();
  }
 
}


function txtctrl(){
  tmpnode.style.backgroundColor=(tmpnode.value!="")?"rgb(220,220,220)":"white";
}


f1="#fff";f2="#007874";

function tableit() {
  for(ri=0;ri<tabletmpnodes.length;ri++){
    tmptr=tabletmpnodes[ri].getElementsByTagName("td");
    for(runi=0;runi<tmptr.length;runi++){
      tmptr[runi].onmouseover=function(){this.style.backgroundColor=f2;}
      tmptr[runi].onmouseout=function(){this.style.backgroundColor=f1;}
    }
  }
}

function tablelight(){
runtimeStyle.backgroundColor='red';
//event.srcElement.style.backgroundColor='red';
}
 
//-->
</script>

</head>

<body>

<table>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
</table>

<form>

<textarea id="_Q0"></textarea>

<input type="button" name="_NPrev" class="mrPrev" style="width: 70px;" value="Tilbage" alt="Tilbage"></input>

<input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Næste" alt="Næste"></input>

</body></html>
Avatar billede mclemens Nybegynder
12. april 2006 - 19:13 #10
hov, slet bare function tablelight(){
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 19:23 #11
hej igen - den der hovereffekt kommer på den enkelte celle i stedet for rækken - kan jeg ændre td-tagget til tr?
Avatar billede mclemens Nybegynder
12. april 2006 - 19:46 #12
hov min fejl...
    tmptr=tabletmpnodes[ri].getElementsByTagName("td");
->
    tmptr=tabletmpnodes[ri].getElementsByTagName("tr");
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 20:02 #13
nå ja - det var heldigvis nemt!
Avatar billede mclemens Nybegynder
12. april 2006 - 20:04 #14
hmmm, det er let nok at få focus sat til en bestemt knap, men ikke mens man er inde i textfeltet - imens man er det vil focus åbenbart automatisk være sat til nærmeste submit knap... js kan ændre typen til en button dynamisk (hvis nu det ikke er nødvendigt at det er en submit type) eller vi kan fuske som her:
(forrige vil her være disabled mens focus er i boksen)


<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>Ingen titel</title>

<script type="text/javascript">
<!--

tmpnode="";tabletmpnodes=""

window.onload=function(){

  if(tmpnode=document.getElementById("_Q0")){
    tmpnode.onfocus=function(){activesubmit(0);}
    tmpnode.onblur=function(){activesubmit(1);}
    tmpnode.focus();

    setInterval("txtctrl();",100);
  }

  if(tabletmpnodes=document.getElementsByTagName("table")){
    tableit();
  }

}


function txtctrl(){
  tmpnode.style.backgroundColor=(tmpnode.value!="")?"rgb(220,220,220)":"white"; 
}

function activesubmit(tmpvar){
  tmpbuttomtarget=tmpnode.offsetParent.getElementsByTagName("input");
    for(ri=0;ri<tmpbuttomtarget.length;ri++){
    if(tmpbuttomtarget[ri].name=="_NPrev")tmpbuttomtarget[ri].disabled=(tmpvar==0)?true:false;
  }
}


f1="#fff";f2="#007874";

function tableit(){
  for(ri=0;ri<tabletmpnodes.length;ri++){
    tmptr=tabletmpnodes[ri].getElementsByTagName("tr");
    for(runi=0;runi<tmptr.length;runi++){
      tmptr[runi].onmouseover=function(){this.style.backgroundColor=f2;}
      tmptr[runi].onmouseout=function(){this.style.backgroundColor=f1;}
    }
  }
}

//-->
</script>

</head>

<body>

<table>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
</table>

<form class="abc">

<textarea id="_Q0"></textarea>

<input type="submit" name="_NPrev" class="mrPrev" style="width: 70px;" value="Tilbage" alt="Tilbage" />

<input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Næste" alt="Næste" />

</form>
</body></html>
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 20:13 #15
det er stadig "Tilbage" der er markeret når man har skrevet noget eller sat et hak.
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 20:21 #16
hvis du vil se det "in action" kan jeg måske sende et link til din emailadresse?
(jeg tror ikke min arbejdsgiver bliver så glad hvis jeg smider det her... det er jo sådan noget mystisk halvfærdigt test-noget...)
Avatar billede mclemens Nybegynder
12. april 2006 - 20:28 #17
nej, jeg har set problemet når man trykker uden for feltet... den vil dog stadig normalt sætte focus til første submit knap når man befinder sig i en form :/
Avatar billede mclemens Nybegynder
12. april 2006 - 21:23 #18
var det bedre nu? Den første submit vil åbenbart altid stå i focus medmindre
man beder den om at focussere den næste... det har jeg så gjort nu...

FF kan godt finde ud af det nu IE kan ikke helt 100%
- dog sætter IE focus til next knappen (der er bare ramme på den anden også)
så hvis man trykker udenfor og herefter enter så er det next der submitter...


<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>Ingen titel</title>

<script type="text/javascript">
<!--

tmpnode="";
tabletmpnodes=""
tmpnode2="";
tmpnode3="";

window.onload=function(){
  if(tmpnode=document.getElementById("_Q0")){

    tmpbuttomtarget=tmpnode.offsetParent.getElementsByTagName("input");
    for(ri=0;ri<tmpbuttomtarget.length;ri++){
      if(tmpbuttomtarget[ri].name=="_NPrev")tmpnode2=tmpbuttomtarget[ri];
      if(tmpbuttomtarget[ri].name=="_NNext")tmpnode3=tmpbuttomtarget[ri];
    }

    tmpnode.onfocus=function(){tmpnode2.disabled=true;}
    tmpnode.onblur=function(){tmpnode2.disabled=false;tmpnode3.focus();}
    tmpnode.focus();

    setInterval("txtctrl();",100);
  }

  if(tabletmpnodes=document.getElementsByTagName("table")){
    tableit();
  }

}


function txtctrl(){
  tmpnode.style.backgroundColor=(tmpnode.value!="")?"rgb(220,220,220)":"white";
}


f1="#fff";f2="#007874";

function tableit(){
  for(ri=0;ri<tabletmpnodes.length;ri++){
    tmptr=tabletmpnodes[ri].getElementsByTagName("tr");
    for(runi=0;runi<tmptr.length;runi++){
      tmptr[runi].onmouseover=function(){this.style.backgroundColor=f2;}
      tmptr[runi].onmouseout=function(){this.style.backgroundColor=f1;}
    }
  }
}

//-->
</script>

</head>

<body>

<table>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
<tr><td>aaaaaaaa</td></tr>
</table>

<form class="abc">

<textarea id="_Q0"></textarea>

<input type="submit" name="_NPrev" tabindex="-1" class="mrPrev" style="width: 70px;" value="Tilbage" alt="Tilbage" />

<input type="submit" name="_NNext" tabindex="1" class="mrNext" style="width: 70px;" value="Næste" alt="Næste" />

</form>
</body></html>
Avatar billede bibliotekarens Nybegynder
12. april 2006 - 22:01 #19
jeg er på vej hjem, men jeg afprøver det hjemmefra - hvor er det fedt, du er med :-)
Avatar billede bibliotekarens Nybegynder
18. april 2006 - 18:54 #20
Hej igen
Undskyld at jeg bare forsvandt - men så blev det jo påske og alting :-)

Nu har jeg prøvet med den nyeste version af funktionerne, men jeg kan stadig ikke få det til at virke. Tilbage er markeret - og hvis jeg stiller cursoren et eller andet sted efter at have valgt noget og så trykker enter, så er det stadig tilbageknappen der styrer - hvad kan det skyldes???
Avatar billede bibliotekarens Nybegynder
18. april 2006 - 18:58 #21
Hov jeg må lige sige at i Firefox er tilbageknappen nu helt "udvisket", så man slet ikke kan få lobv at trykke på den...
Avatar billede mclemens Nybegynder
18. april 2006 - 19:56 #22
[ og hvis jeg stiller cursoren et eller andet sted efter at have valgt noget og så trykker enter, så er det stadig tilbageknappen der styrer - hvad kan det skyldes??? ]
- at det altid vil være den første submit knap der styrer derfor start forslaget om at rette submit knappen til en button... evt. kunne de to knappers rækkefølge byttes om i html koden og så placeres modsat hinanden igen med css - så vil det visuelt være tilbage der står først men rent teknisk er det næste og fokus vil derfor være på denne... - kan måske også bytte plads på dem via dom ved load af siden ... har ikke så meget tid lige p.t. :/

[ Hov jeg må lige sige at i Firefox er tilbageknappen nu helt "udvisket", så man slet ikke kan få lobv at trykke på den... ]
- glemte at tjekke i ff ... ie har samme detalje dog kan man godt trykke på den... - jeg lavede det for at få focus rettet på næste knappen... hvis jeg flytter focus med javascripts focus() funktion kan du ikke skrive i boksen :/

- kigger på dom ombytning og replacering af knapperne... lidt senere...
Avatar billede bibliotekarens Nybegynder
18. april 2006 - 20:06 #23
Hej igen - ja, du behøver slet ikke skynde dig :-) Jeg har jo selv "syltet" sagen i dagevis... Bare når du har tid :-)

Jeg havde ikke liiige opdaget det med submit i stedet for button... Problemet er bare at jeg ikke har adgang til at ændre i tagget - men jeg kan vist godt ændre rækkefølgen. Så kan jeg prøve at gøre det og så positionere via css. Det er da et forsøg værd :-)

Ang- firefox, så tror jeg at størstedelen af vores målgruppe bruger ie, så det er nok ikke så vigtigt (jo altså det skal jo virke... men det behøver ikke være helt så smukt :-) )
Avatar billede bibliotekarens Nybegynder
18. april 2006 - 20:34 #24
ja det virkede sørme :-)
Nu skal jeg så bare finde ud af at få dem positioneret pænt.

synes du jeg så bare skal droppe scriptet og bytte om på knapperne og så positionere i css? eller ville det være vildt dårlig kode skik? jeg kan selvfølgelig lave en kommentar i templaten så andre vil kunne finde ud af hvad der foregår...

Du skal i hvert fald have 1000 tak for al hjælpen!!! Hvis du er sød at lægge et svar får du nogle points :-)

Og det kan være jeg "udnytter" din hjælp en anden god gang :-)
Avatar billede mclemens Nybegynder
18. april 2006 - 21:11 #25
[ synes du jeg så bare skal droppe scriptet og bytte om på knapperne og så positionere i css?]
- jo det ville være nemmest :P

[ eller ville det være vildt dårlig kode skik? ]
Hvis det virker er det ikke slemt... det er slemmere at ændre på en formular bagefter end at gøre så den står rigtig fra starten af... om man så snyder lidt visuelt er uden betydning :)

[ jeg kan selvfølgelig lave en kommentar i templaten så andre vil kunne finde ud af hvad der foregår... ]
- lyder fornuftigt nok ellers tror de vel den er helt gal :D

[ Du skal i hvert fald have 1000 tak for al hjælpen!!! Hvis du er sød at lægge et svar får du nogle points :-) ]
- ok, her er et svar :)

... p.s. nogle af de andre scripts er jo forkortet i http://www.eksperten.dk/spm/702439#rid6204728 med rettelsen fra http://www.eksperten.dk/spm/702439#rid6204730 samt det td -> tr med hensyn til det hover på tabel rækkerne... :)
Avatar billede bibliotekarens Nybegynder
18. april 2006 - 21:18 #26
1000 tak for hjælpen - du er en helt :-)
Avatar billede mclemens Nybegynder
18. april 2006 - 21:23 #27
- det var så lidt :)
og tak for point :)
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