✔ Farbwahl klappt unter IE nicht

EuroCent · 14. Juni 2007

Habe folgendes Problem:

Bei mir klappt die Farbwahl unter IE nicht jedoch unter FireFox schon.

Wie bekomm ich es hin das es unter IE auch geht?

hier der HTML code

Code:

<select name="colors">
	<option selected="selected">Farbwahl</option>
	<option style="color:#0000FF" onclick="insert('[ color=blue*, '[ /color ]')">Blau</option>
	<option style="color:#FF0000" onclick="insert('[ color=red*', '[ /color ]')">Rot</option>
	<option style="color:#FFFF00" onclick="insert('[ color=yellow*', '[ /color ]')">Gelb</option>
	<option style="color:#00FF00" onclick="insert('[ color=green*', '[ /color ]')">Gr&uuml;n</option>
	<option style="color:#000000" onclick="insert('[ color=black*', '[ /color ]')">Schwarz</option>
	<option style="color:#FFFFFF" onclick="insert('[ color=white*', '[ /color ]')">Weiss</option>
	<option style="color:#999999" onclick="insert('[ color=grey*', '[ /color ]')">Grau</option>
	<option style="color:#FF9900" onclick="insert('[ color=orange*', '[ /color ]')">Orange</option>
	<option style="color:#9900FF" onclick="insert('[ color=#9900FF*', '[ /color ]')">Violett</option>
	<option style="color:#FF00FF" onclick="insert('[ color=pink*', '[ /color ]')">Pink</option>
	<option style="color:#00FFFF" onclick="insert('[ color=#00FFFF*', '[ /color ]')">T&uuml;rkis</option>
</select>

Hier der Javascript:

Code:

function insert(aTag, eTag) {
  var input = document.forms['formular'].elements['message'];
  input.focus();
  /* for IE */
  if(typeof document.selection != 'undefined') {
    /* Input the Code */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);      
    }
    range.select();
  }
  /* for new Gecko based Browsers */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Input the Code */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* for other Browser */
  else
  {
    /* Get the position */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("EinfÃ¼gen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Input the Code */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}

Sven Mintel · 14. Juni 2007

der IE reagiert nicht auf "onclick" in <option>.

Stattdessen überwache den onchange-Event im <select> ...die Farbwerte kannst du dann ja aus dem style der ausgewählten <option> ermitteln.

EuroCent · 14. Juni 2007

öhm... sorry aber wie mach ich das?

Sven Mintel · 14. Juni 2007

http://de.selfhtml/org/html/formulare/auswahl.htm#listen_absendewert

EuroCent · 14. Juni 2007

Hmm... aber wie bau ich das bei mir ein darüber wird ja nur Alert ausgegeben bei mir soll es ja dann gleich in die textarea

Hier mal der komplette Code

Code:

$header
$acp_h
<script language="javascript" type="text/javascript">
<!--
function dele() {
 confirm('Sind sie sich Sicher das sie es Löschen wollen?');
}

function insert(aTag, eTag) {
  var input = document.forms['formular'].elements['message'];
  input.focus();
  /* for IE */
  if(typeof document.selection != 'undefined') {
    /* Input the Code */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);      
    }
    range.select();
  }
  /* for new Gecko based Browsers */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Input the Code */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* for other Browser */
  else
  {
    /* Get the position */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("EinfÃ¼gen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Input the Code */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}
//-->
</script>
<if($finish)>
<then>
<table class="finish" cellpadding="3" cellspacing="1" border="0" width="100%" align="center">
<tr>
<td align="center"><span class="smallfont"><b>$finish</b></span></td>
</tr>
</table>
</then>
<else>
$acp_news_preview

<form name="formular" action="" method="post">
<input type="hidden" name="doThis" />
<input type="hidden" name="n_id" value="$news_id" />
<input type="hidden" name="time" value="$time" />
<table class="tableborder" cellpadding="3" cellspacing="1" border="0" width="100%" align="center">
<tr>
<td class="tabletitle" align="center" colspan="2"><span class="smallfont"><b>News - Einstellung</b></span></td>
</tr>
<tr>
<td class="tablecat" colspan="2" align="center"><span class="smallfont"><b>Einstellungen &auml;ndern</b></span></td>
</tr>
<tr>
<td width="20%" align="left" class="tablea"><span class="smallfont"><b>Newsnachricht &auml;ndern:</b></span></td>
<td width="80%" align="left" class="tableb">
<select name="news_text">
  <option value="new">News Neu</option>
  $n_texte


</select> <input class="input" type="submit" value="Anzeigen!" name="change" /> <input name="n_title" value="$n_title" type="text" class="input" /></td>
</tr>
<tr>
<td width="20%" align="left" class="tablea"><span class="smallfont"><b>News anzeigen:</b></span></td>
<td width="80%" align="left" class="tableb">
<select name="select">
  <option value="yes" $selected>Ja</option>
  <option value="no" $selected>Nein</option>
</select>
</td>
</tr>
<tr>
<td align="left" class="tablea" valign="top"><span class="smallfont"><b>News-Nachricht</b></span><br /><br /><span class="smallfont"><b>Smilies:</b></span><br />
<table class="tableborder" cellpadding="3" cellspacing="1" border="0" align="left">
<tr>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':baby:', '')" src="./images/smilies/baby.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':D', '')" src="./images/smilies/biggrin.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':?', '')" src="./images/smilies/confused.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert('8)', '')" src="./images/smilies/cool.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':cry:', '')" src="./images/smilies/crying.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert('=o', '')" src="./images/smilies/eek.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':evil:', '')" src="./images/smilies/evil.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':(', '')" src="./images/smilies/frown.gif" border="0" /></td>
</tr>
<tr>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':happy:', '')" src="./images/smilies/happy.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert('x(', '')" src="./images/smilies/mad.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':]', '')" src="./images/smilies/pleased.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':o', '')" src="./images/smilies/redface.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':rolleyes:', '')" src="./images/smilies/rolleyes.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':)', '')" src="./images/smilies/smile.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(';P', '')" src="./images/smilies/tongue2.gif" border="0" /></td>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(':P', '')" src="./images/smilies/tongue.gif" border="0" /></td>
</tr>
<tr>
<td valign="bottom" class="tableb"><img alt="" onclick="insert(';)', '')" src="./images/smilies/wink.gif" border="0" /></td>
<td valign="bottom" class="tableb">&nbsp;</td>
<td valign="bottom" class="tableb">&nbsp;</td>
<td valign="bottom" class="tableb">&nbsp;</td>
<td valign="bottom" class="tableb">&nbsp;</td>
<td valign="bottom" class="tableb">&nbsp;</td>
<td valign="bottom" class="tableb">&nbsp;</td>
<td valign="bottom" class="tableb">&nbsp;</td>
</tr>
</table>
</td>
<td align="left" class="tableb"><span class="smallfont"><b>BBCode:</b></span> <input class="input" onclick="insert('[ b]', '[ /b]')" type="button" name="fett" value="[ B]" /> <input name="kursiv" type="button" onclick="insert('[ i]', '[ /i]')" class="input" id="kursiv" value="[ I]" /> 
<input name="unterstrichen" type="button" onclick="insert('[ u]', '[ /u]')" class="input" id="unterstrichen" value="[ U]" /> 
<input name="image" type="button" class="input" onclick="insert('[ img]', '[ /img]')" id="image" value="[ IMG]" />
<input name="url" type="button" class="input" id="url" onclick="insert('[ url]', '[ /url]')" value="[ URL]" />
<input name="mail" type="button" class="input" id="mail" onclick="insert('[ email]', '[ /email]')" value="[ email]" /> 
<select name="colors">
	<option selected="selected">Farbwahl</option>
	<option style="color:#0000FF" onclick="insert('[ color=blue]', '[ /color]')">Blau</option>
	<option style="color:#FF0000" onclick="insert('[ color=red]', '[ /color]')">Rot</option>
	<option style="color:#FFFF00" onclick="insert('[ color=yellow]', '[ /color]')">Gelb</option>
	<option style="color:#00FF00" onclick="insert('[ color=green]', '[ /color]')">GrÃ¼n</option>
	<option style="color:#000000" onclick="insert('[ color=black]', '[ /color]')">Schwarz</option>
	<option style="color:#FFFFFF" onclick="insert('[ color=white]', '[ /color]')">Weiss</option>
	<option style="color:#999999" onclick="insert('[ color=grey]', '[ /color]')">Grau</option>
	<option style="color:#FF9900" onclick="insert('[ color=orange]', '[ /color]')">Orange</option>
	<option style="color:#9900FF" onclick="insert('[ color=violet]', '[ /color]')">Violett</option>
	<option style="color:#FF00FF" onclick="insert('[ color=pink]', '[ /color]')">Pink</option>
	<option style="color:#00FFFF" onclick="insert('[ color=turkis]', '[ /color]')">TÃ¼rkis</option>
</select>
<br />
<textarea name="message" cols="100%" rows="10" id="focus" $disabled>$pn_message</textarea></td>
</tr>
<tr>
<td colspan="2" class="tablea" align="center">$speichern $preview <input class="input" type="reset" value="Zur&uuml;chsetzen" /> <input class="input" type="submit" onClick="javascript:dele();" name="del" value="L&ouml;schen" /></td>
</tr>
</table>
</form><br />
</else>
</if>
$acp_f
$footer

Sven Mintel · 15. Juni 2007

Mmmh... hast du eigentlich erwartet, dass es für jedes bisserl eine fertige Lösung im Netz gibt.
Wenn du etwas selbst skripten willst, musst du wissen, welche Methoden/Eigenschaften es gibt, und über diese zu deinem gewünschten Ergebnis gelangen.

Selbiges könnte bspw. so aussehen:

Code:

<script type="text/javascript">
<!--
function insert_colors(o)
{
  if(o.selectedIndex>0)
    {
      insert('[ color='+o.value+'*', '[ /color ]')
    }
}
//-->
</script>

<select name="colors" onchange="insert_colors(this)">
	<option selected="selected">Farbwahl</option>
	<option style="color:#0000FF" value="blue">Blau</option>
	<option style="color:#FF0000" value="red">Rot</option>
	<option style="color:#FFFF00" value="yellow">Gelb</option>
	<option style="color:#00FF00" value="green">Gr&uuml;n</option>
	<option style="color:#000000" value="black">Schwarz</option>
	<option style="color:#FFFFFF" value="white">Weiss</option>
	<option style="color:#999999" value="grey">Grau</option>
	<option style="color:#FF9900" value="orange">Orange</option>
	<option style="color:#9900FF" value="#9900FF">Violett</option>
	<option style="color:#FF00FF" value="pink">Pink</option>
	<option style="color:#00FFFF" value="#00FFFF">T&uuml;rkis</option>
</select>

...ist doch garnicht so kompliziert

EuroCent · 15. Juni 2007

Naja für einen der sich mit Javascript nicht beschäftigt schon

Nun ist es so das ich allerdings totaler Anfänger bin was JS angeht... daher hab ich echt null ahnung von dem

Ich meine dein Beispiel Script würde mich denk ich mal weiter bringen aber wie schaff ich es zu dem noch das es in der textarea dann steht?

Sven Mintel · 15. Juni 2007

Lenox hat gesagt.:
aber wie schaff ich es zu dem noch das es in der textarea dann steht?

..indem du es in dein Dokument einfügst.
Es ist nur eine Funktion dazwischengeschaltet, welche dann letztendlich insert() mit den gewünschten Parametern aufruft.

EuroCent · 17. Juni 2007

Sorry versteh ich nicht ganz...

Ich bin wie gesagt absoluter Anfänger was JS angeht!

Könntest mir da helfen?

Sven Mintel · 17. Juni 2007

ich weiss nicht, wo ich da helfen soll...die Funktion insert() steht doch schon in deinem Code....meine Funktion ruft diese Funktion auf.

Du musst also nur meinen Code in dein Dokument einfügen.

✔ Farbwahl klappt unter IE nicht

EuroCent

Klappstuhl 2.0

Sven Mintel

Mitglied

EuroCent

Klappstuhl 2.0

Sven Mintel

Mitglied

EuroCent

Klappstuhl 2.0

Sven Mintel

Mitglied

EuroCent

Klappstuhl 2.0

Sven Mintel

Mitglied

EuroCent

Klappstuhl 2.0

Sven Mintel

Mitglied

Neue Beiträge