Søg
Avatar billede ss Nybegynder
14. april 2006 - 00:52 Der er 19 kommentarer og
1 løsning

Editor: Markering forsvinder ved egen select

Hej Eksperter.
Jeg har lavet min egen select/dropdown til min WYSIWYG-editor fordi at den almindelige select ikke kan styles ordenligt. Det hele virker perfekt bortset fra at når jeg i IE markerer en tekst i mit editor-iframe og klikker på min egen dropdown, så forsvinder markeringen og teksten formateres ikke.

Nogle der kan fortælle mig hvordan jeg "beholder" markeringen ved klik på hjemmelavet select?

På forhånd tak!
Avatar billede mclemens Nybegynder
14. april 2006 - 14:19 #1
nemmeste løsning vil være at skifte onclick="switchdis();" til onmouseover="switchdis();" så bliver focus ikke sat til feltet...
har fået problemet med onclick løst med ff dog kan jeg ikke rigtig
få ie til at huske tidligere selection position... men med onmouseover
som nedenunder virker det...

her er lige et eksempel (ikke for kønt):




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

<style type="text/css">
.imgbuttom{position:absolute;right:0;top:0;width:20px;}
.dropdownbox{position:absolute;z-index:1;width:150px;display:none;border:4px dashed red;background-color:white;}
</style>

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

function switchdis(){
if(document.getElementById("dropbox2").style.display!="block"){
  document.getElementById("dropbox2").style.display="block";
}else{
  document.getElementById("dropbox2").style.display="none";
}
}

window.onload=function(){
document.getElementById("dropbox2").style.top=document.getElementById("dropbox1").offsetTop;
document.getElementById("dropbox2").style.left=document.getElementById("dropbox1").offsetLeft;
}




mytxt="";
mytxts="";
mytxte="";
mycurtxtl="";
myvalue="";

function findselect(mytag){
mytxtarea=document.formnavn.txtareanavn;

if(document.selection){
  mytxt=document.selection.createRange().text;
  if(mytxt!="")document.selection.createRange().text="["+mytag+"]"+mytxt+"[/"+mytag+"]";
}else if((mytxtarea.selectionEnd-mytxtarea.selectionStart)>0){
  mytxts=mytxtarea.selectionStart;
  mytxte=mytxtarea.selectionEnd;
  mycurtxtl=mytxtarea.textLength;
  myvalue=mytxtarea.value;
mytxtarea.value=mytxtarea.value.substr(0,mytxts)+"["+mytag+"]"+mytxtarea.value.substr(mytxts,mytxte-mytxts)+"[/"+mytag+"]"+mytxtarea.value.substr(mytxte,mycurtxtl);
}
}

//-->
</script></head>


<body>
<form method="POST" action="#" name="formnavn">


<div id="dropbox2" class="dropdownbox">
<input type="button" onclick="findselect('b');switchdis();" value="Fed skrift">
<input type="button" onclick="findselect('i');switchdis();" value="Kursiv skrift">
<input type="button" onclick="findselect('u');switchdis();" value="Understreget skrift">
</div>

<div style="position:relative;width:150px;" id="dropbox1">

  <input type="text" id="dropbox1inp" name="nametilinputtet" size="10" onkeyup="this.value='';" onmouseover="switchdis();" style="width:100px;display:block;padding:0px;margin:0px;" value="Tilføj tag">

  <img src="img.gif" onmouseover="switchdis();" class="imgbuttom" alt="img">
</div>

<textarea rows="5" name="txtareanavn" cols="20"></textarea>
</form>

</body></html>
Avatar billede ss Nybegynder
14. april 2006 - 16:47 #2
Hmm, jeg er helst ikke intereseret i en onmouseover-funktion.
Jeg prøvede istedet for et input-felt at bruge en <button> og der bevarer den faktisk markeringen, det er bare svært at style en button lige som jeg vil have den.
Avatar billede mclemens Nybegynder
14. april 2006 - 16:55 #3
[ lige som jeg vil have den. ]
... link til billede illustrering :P
Avatar billede mclemens Nybegynder
14. april 2006 - 16:57 #4
edit hvad med en img istedet?
<img src="b1.jpg" id="dropbox1inp" onclick="switchdis();" alt="">
Avatar billede ss Nybegynder
14. april 2006 - 17:13 #5
Altså et billede istedet for input/button?
Jamen så kan jeg jo ikke få tekst på?
Altså det er til en editor.
Der skulle jo gerne skiftes mellem: verdana, tahoma, times new roman og sådan.
Avatar billede mclemens Nybegynder
14. april 2006 - 17:18 #6
... bare en button hvor teksten skiftes ligesom input feltet gjorde?
Avatar billede ss Nybegynder
14. april 2006 - 17:20 #7
Må indrømme jeg er stået lidt af?

Hvor skal billedet være og hvor skal button være?
Avatar billede mclemens Nybegynder
14. april 2006 - 17:20 #8
[ ligesom input feltet gjorde? ]
input feltet skiftede ikke i ovenstående...
Avatar billede mclemens Nybegynder
14. april 2006 - 17:21 #9
to sekunder...
Avatar billede mclemens Nybegynder
14. april 2006 - 17:22 #10
istedet for:
<input type="text" id="dropbox1inp" name="nametilinputtet" size="10" onkeyup="this.value='';" onmouseover="switchdis();" style="width:100px;display:block;padding:0px;margin:0px;" value="Tilføj tag">

bruger vi:

<input type="button" id="dropbox1inp" name="nametilinputtet" onclick="switchdis();" value="Tilføj tag">

og så en funktion der skifter teksten på den button ved click i dropdown menuen...
Avatar billede ss Nybegynder
14. april 2006 - 17:26 #11
Ja, det er også det jeg prøver at fifle med i øjeblikket.
Jeg bruger bare en <button></button> istedet, fordi så kan jeg skrive html, det betyder vel ikke noget stort?
Avatar billede mclemens Nybegynder
14. april 2006 - 17:34 #12
[ Jeg bruger bare en <button></button> istedet, fordi så kan jeg skrive html, det betyder vel ikke noget stort? ]

ikke noget af betydning hvis du bruger innerHTML, men hvis du bruger DOM metoder skal der lidt mere arbejde til for at få de rigtige tags placeret... og det afhænger af hvordan indholdet i button tagget skal se ud ved clicks i undermenuen...
Avatar billede mclemens Nybegynder
14. april 2006 - 17:37 #13
kan godt fifle med det også, men så skal du lige sige hvilke tags den skal wrappe omkring indholdet i button tagget og hvad indholdet skal være ved klik på undermenuen...

- m.h.t. det billede jeg nævnte så har jeg en udgave med en transperant gif der ligger henover input feltet så focus ikke sættes til inputfeltet når man clicker på det ... så du stadig kan bruge inputfeltet som før hvis det hjælper...
Avatar billede ss Nybegynder
14. april 2006 - 18:07 #14
Ja jeg vil da gerne se det med billedet, men vil det virke?
Fordi jeg prøvede med en div istedet for et input-felt, og der forsvandt markeringen også.

Ps. Smid et svar så får du point
Avatar billede mclemens Nybegynder
14. april 2006 - 18:14 #15
[ Ja jeg vil da gerne se det med billedet, men vil det virke? ]
... den er ikke rettet til... men en div placeret relativt - en div
mere placeret absolute ovenpå inputfeltet der er placeret inde i den relativt placerede div... rodet formuleret med prøv den :/
husk en transperant.gif (t.gif) fil :)


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

<style type="text/css">
.imgbuttom{position:absolute;right:0;top:0;width:20px;}
.dropdownbox{position:absolute;z-index:1;width:150px;display:none;border:4px dashed red;background-color:white;}
</style>

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

function switchdis(){
if(document.getElementById("dropbox2").style.display!="block"){
  document.getElementById("dropbox2").style.display="block";
}else{
  document.getElementById("dropbox2").style.display="none";
}
}

window.onload=function(){
document.getElementById("dropbox2").style.top=document.getElementById("dropbox1").offsetTop;
document.getElementById("dropbox2").style.left=document.getElementById("dropbox1").offsetLeft;
}




mytxt="";
mytxts="";
mytxte="";
mycurtxtl="";
myvalue="";

function findselect(mytag){
mytxtarea=document.formnavn.txtareanavn;

if(document.selection){
  mytxt=document.selection.createRange().text;
  if(mytxt!="")document.selection.createRange().text="["+mytag+"]"+mytxt+"[/"+mytag+"]";
}else if((mytxtarea.selectionEnd-mytxtarea.selectionStart)>0){
  mytxts=mytxtarea.selectionStart;
  mytxte=mytxtarea.selectionEnd;
  mycurtxtl=mytxtarea.textLength;
  myvalue=mytxtarea.value;
mytxtarea.value=mytxtarea.value.substr(0,mytxts)+"["+mytag+"]"+mytxtarea.value.substr(mytxts,mytxte-mytxts)+"[/"+mytag+"]"+mytxtarea.value.substr(mytxte,mycurtxtl);
}
}

//-->
</script></head>


<body>
<form method="POST" action="#" name="formnavn">


<div id="dropbox2" class="dropdownbox">
<input type="button" onclick="findselect('b');switchdis();" value="Fed skrift">
<input type="button" onclick="findselect('i');switchdis();" value="Kursiv skrift">
<input type="button" onclick="findselect('u');switchdis();" value="Understreget skrift">
</div>

<div style="position:relative;width:150px;height:30px;" id="dropbox1">

<input type="text" id="dropbox1inp" name="nametilinputtet" size="10" onkeyup="this.value='';" style="width:120px;display:block;padding:0px;margin:0px;" value="Tilføj tag">

<img src="t.gif" id="dropbox1inp" onclick="switchdis();" style="position:absolute;top:0px;left:0px;height:100%;width:150px;">

</div>


<textarea rows="5" name="txtareanavn" cols="20"></textarea>
</form>

</body></html>
Avatar billede mclemens Nybegynder
14. april 2006 - 18:15 #16
[ Ps. Smid et svar så får du point ]
... hmmm, har vist ikke løst hele dit problem endnu
- men ok, her er et svar :)
Avatar billede mclemens Nybegynder
14. april 2006 - 18:18 #17
her er den jeg arbejder på p.t.
- kigger lige på at skifte tekst i button også...


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

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

function switchdis(tmpid){
tn=document.getElementById(tmpid);
tn.style.display=(tn.style.display=="none")?"block":"none";
}

window.onload=function(){
tn=document.getElementById("box1");
tn2=document.getElementById("button1");
tn.style.top=tn2.offsetTop+"px";
tn.style.left=tn2.offsetLeft+"px";
tn.style.width=tn2.offsetWidth+"px";
}


mytxt="";
mytxts="";
mytxte="";
mycurtxtl="";
myvalue="";
function findselect(mytag){
mytxtarea=document.formnavn.txtareanavn;

if(document.selection){
  mytxt=document.selection.createRange().text;
  if(mytxt!="")document.selection.createRange().text="["+mytag+"]"+mytxt+"[/"+mytag+"]";
}else if((mytxtarea.selectionEnd-mytxtarea.selectionStart)>0){
  mytxts=mytxtarea.selectionStart;
  mytxte=mytxtarea.selectionEnd;
  mycurtxtl=mytxtarea.textLength;
  myvalue=mytxtarea.value;
mytxtarea.value=mytxtarea.value.substr(0,mytxts)+"["+mytag+"]"+mytxtarea.value.substr(mytxts,mytxte-mytxts)+"[/"+mytag+"]"+mytxtarea.value.substr(mytxte,mycurtxtl);
}
}

//-->
</script></head><body>

<form method="POST" action="#" name="formnavn" style="position:relative;">
<textarea rows="5" name="txtareanavn" cols="20"></textarea><br>

<button id="button1" onclick="switchdis('box1');return false;">Skift</button>

<div id="box1" class="dropdownbox" style="position:absolute;top:0px;left:0px;display:none;">
<input type="button" onclick="findselect('b');switchdis('box1');" value="Fed skrift">
<input type="button" onclick="findselect('i');switchdis('box1');" value="Kursiv skrift">
<input type="button" onclick="findselect('u');switchdis('box1');" value="Understreget skrift">
</div>

</form>

</body></html>
Avatar billede ss Nybegynder
14. april 2006 - 18:36 #18
Din usynlig-gif-img-ovenpå-input-version ser ud til at virker PERFEKT!
Jeg fifler lige færdigt med den og vender tilbage.
Avatar billede ss Nybegynder
15. april 2006 - 16:53 #19
Resultatet er blevet perfekt!
Tilykke med dine point!
Avatar billede mclemens Nybegynder
15. april 2006 - 17:05 #20
[ Resultatet er blevet perfekt! ]
hehe ... rart man må fuske lidt :)

[ Tilykke med dine point! ]
- tak for pointene :)
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
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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
I dag 09:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
I går 18:51 Pausepil på youtube i chrome Af valby i Browsere
I går 11:42 Mail med endelsen ".lat" Af ErikHg i E-mail
21/0511:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
21/0511:03 Bitlocker fordele-ulemper, samt nulstille PC Af Uvanga i Windows
White papers
Flere white papers »