PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Text in Textfeld einfügen ohne das eingegebenes gelöscht wird!


chris_xn
28.05.2004, 18:55:42
Gutn amd,

Ich habe ein mehrzeiliges textfeld, wo der user etwas einträgt, per button an der stelle wo gerade der Cursor im Textfeld ist neuer Text eingetragen wird zum Bleistift: "Hallo" ohne das alles andere gelöscht wird und die Seite nicht neu geladen werden muss. Wie geht das? Weiß nicht ob das zum Javascriptteil des Forums gehört...

Hab zur zeit nur das ziemlich dürftige:

<input name="farbe" type="button" onclick="document.getElementById('text').value=text.'Hallo';" value="Farbe &auml;ndern">

Das ersetzt aber gleich den ganzen Textfeldinhalt mit "Hallo".

feuervogel
28.05.2004, 19:45:36
Weiß nicht ob das zum Javascriptteil des Forums gehört...

wohin sonst?

es gibt da ein javascript welches das macht...



// bbCode control by subBlue design www.subBlue.com
// Startvariablen
var imageTag = false;
var theSelection = false;
// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
&& (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
&& (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;

var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);



// Definition der Tags (Codes)
// 0: fett, 2: kursiv, 4: unterstrichen, 6: ueberschrift, 8: rot, 10: blau, 12: gruen, 14: links, 16: zentriert, 18: rechts, 20: artikel, 22: link, 24: durchgestrichen, 26: hoch, 28: tief, 30: liste, 32: numliste, 34: eintrag, 36: nobreak, 38: trennliniegrau, 40: trennlinieschwarz
bbcode = new Array();
bbtags = new Array('','','','','','','','','','','','');
imageTag = false;







// Funktion zum Einfuegen einfacher Textschnipsel
function einfuegen(text)
{
var txtarea = document.artikel.content;
if(txtarea.createTextRange && txtarea.caretPos)
{
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
txtarea.focus();
}
else
{
txtarea.value += text;
txtarea.focus();
}
}




// Einfuegen von Code vor und hinter einem markierten Element
function tagseinfuegen(bbnumber)
{
var txtarea = document.artikel.content;
donotinsert = false;
theSelection = false;
bblast = 0;
if((clientVer >= 4) && is_ie && is_win)
{
theSelection = document.selection.createRange().text; // Get text selection
if (theSelection)
{
// Add tags around selection
document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1];
txtarea.focus();
theSelection = '';
return;
}
}
else if(txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
{
mozWrap(txtarea, bbtags[bbnumber], bbtags[bbnumber+1]);
return;
}
// Find last occurance of an open tag the same as the one just clicked
for (i = 0; i < bbcode.length; i++)
{
if (bbcode[i] == bbnumber+1)
{
bblast = i;
donotinsert = true;
}
}
if (donotinsert)
{ // Close all open tags up to the one just clicked & default button names
while (bbcode[bblast])
{
butnumber = arraypop(bbcode) - 1;
txtarea.value += bbtags[butnumber + 1];
buttext = eval('document.artikel.addbbcode' + butnumber + '.value');
eval('document.artikel.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
imageTag = false;
}
txtarea.focus();
return;
}
else
{
einfuegen(bbtags[bbnumber] + bbtags[bbnumber + 1])
}
storeCaret(txtarea);
}
// From http://www.massless.org/mozedit/
function mozWrap(txtarea, open, close)
{
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if(selEnd == 1 || selEnd == 2)
selEnd = selLength;
var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + open + s2 + close + s3;
return;
}
// Insert at Caret position. Code from
// http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
function storeCaret(textEl)
{
if(textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}
//-->

das ganze im html dann so benutzen:

<form ... name="artikel" id="artikel">
.
.
.
<a href="#" onclick="einfuegen(hallo);document.forms.artikel.content.focus();">...</a>
.
.
.
<textarea name="content" id="content" cols="90" rows="6" class="inputs"></textarea>
</form>

übrigens wird das hier im forum so ähnlich auch benutzt, nur mal so als tipp;)

chris_xn
28.05.2004, 23:32:53
hi
also ich bekoms net hin... es funktioniert nicht und ich kenn mich in javascript nun auch nicht so aus... hast du was vergessen? was ist zum beispiel

// Definition der Tags (Codes)
// 0: fett, 2: kursiv, 4: unterstrichen, 6: ueberschrift, 8: rot, 10: blau, 12: gruen, 14: links, 16: zentriert, 18: rechts, 20: artikel, 22: link, 24: durchgestrichen, 26: hoch, 28: tief, 30: liste, 32: numliste, 34: eintrag, 36: nobreak, 38: trennliniegrau, 40: trennlinieschwarz

Gibts zu den ganzen vielleicht ne beschreibung? www.subblue.com wird gerade in der codesektion überarbeitet.

chris_xn
28.05.2004, 23:49:02
haaa... ein problem hab ich schon mal:

<a href="#" onclick="einfuegen('hallo');document.forms.artikel.content.focus();">einfügen</a><br><br>

muss 'hallo' sein!

wär trotzdem nett wenn du mir die frage zu den code oben beantworten könntest. wie bine ich das dann ein... und überhaupt und sowieso :-)

feuervogel
29.05.2004, 02:37:55
öhm, ja, hab auch keinen plan von js, habs auch nur kopiert...ich schaus mir morgen mal an...

$schlaf->jetzt();

feuervogel
30.05.2004, 10:46:28
http://www.julianmoritz.de/selfphp/chrisxn.html

da dürfte alles stehen;-)

chris_xn
30.05.2004, 15:48:20
Danke erstmal für deine Mühe. Hab mich mal hingesetzt und mal ein bisschen mit den anderen Scripts gespielt. Das ist da herausgekommen.

[CODE]
<html>
<head>
<title>&Auml;nderungsmaske Neuigkeiten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--

/*written by chris wetherell
http://www.massless.org
chris [THE AT SIGN] massless.org

warning: it only works for IE4+/Win and Moz1.1+
feel free to take it for your site
if there are any problems, let chris know.
*/


var thisForm; /* make sure to change the onload handler of the
<body> tag to the form you're using!... */

/* YOU CAN ERASE getMozSelection():
It's here for debug purposes only */
function getMozSelection(txtarea) {
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd==1 || selEnd==2) selEnd=selLength;
return (txtarea.value).substring(selStart, selEnd);
}

function mozWrap(txtarea, lft, rgt) {
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd==1 || selEnd==2) selEnd=selLength;
var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + lft + s2 + rgt + s3;
}

function IEWrap(lft, rgt) {
strSelection = document.selection.createRange().text;
if (strSelection!="") {
document.selection.createRange().text = lft + strSelection + rgt;
}
}

function wrapSelection(txtarea, lft, rgt) {
if (document.all) {IEWrap(lft, rgt);}
else if (document.getElementById) {mozWrap(txtarea, lft, rgt);}
}
function wrapSelectionWithLink(txtarea) {
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
lft="<a href="" + my_link + "">";
rgt="</a>";
wrapSelection(txtarea, lft, rgt);
}
return;
}

document.onkeypress = function (e) {
if (document.all) {
key=event.keyCode; txtarea=thisForm.textfeld;
if (key == 1) wrapSelectionWithLink(txtarea);
if (key == 2) wrapSelection(txtarea,'<b>','</b>');
if (key == 20) wrapSelection(txtarea,'<i>','</i>');
}
else if (document.getElementById) {
ctrl=e.ctrlKey; shft=e.shiftKey; chr=e.charCode;
if (ctrl) if (shft) if (chr==65) wrapSelectionWithLink(thisForm.textfeld);
if (ctrl) if (shft) if (chr==66) wrapSelection(thisForm.textfeld,'<b>','</b>');
if (ctrl) if (shft) if (chr==84) wrapSelection(thisForm.textfeld,'<i>','</i>');
}
return true;
}
/* end chris w. script */



/*
written by meg hourihan
http://www.megnut.com
meg@megnut.com

warning: it only works for IE4+/Win and Moz1.1+
feel free to take it for your site
but leave this text in place.
any problems, let meg know.
*/

function mouseover(el) {
el.className = "raise";
}

function mouseout(el) {
el.className = "buttons";
}

function mousedown(el) {
el.className = "press";
}

function mouseup(el) {
el.className = "raise";
}
/* end meg script */

// -->


//-->
</script>
<style type="text/css">
<!--
.buttons {
background: #ccc;
border: 1px solid #ccc;
margin: 1;
float:left;
}

.raise {
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
background: #ccc;
margin:1;
float:left;
}

.press {
border-top: 1px solid buttonshadow;
border-left: 1px solid buttonshadow;
border-bottom: 1px solid buttonhighlight;
border-right: 1px solid buttonhighlight;
background: #ccc;
margin:1;
float:left;
}

#toolbar {
margin: 0;
width: 153px;
padding: 0;
height:20px;
background: #ccc;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
text-align:left;
}

-->
</style>
</head>

<body onload="var SymTmpWinOpen = window.open; window.open = SymWinOpen; thisForm=document.forma;; window.open = SymTmpWinOpen;">
<form action="script.php" method="post" enctype="multipart/form-data" name="forma" id="forma">
<p class="ueberschrift1">&Auml;nderungsmaske</p>
<table width="700" border="0" cellspacing="0" cellpadding="5">
<tr align="left" valign="top">
<td width="680"><span class="text">Beschreibender Text</span><span class="ueberschrift3">
</span> <div id="toolbar"><img class="buttons" onMouseOver="mouseover(this);" onMouseOut="mouseout(this);"
onMouseDown="mousedown(this);" onMouseUp="mouseup(this);"
onClick="wrapSelection(thisForm.textfeld,'<b>','</b>');" src="bold.gif"
title="Hier klicken um den markierten Text fett zu machen"> <img class="buttons" onMouseOver="mouseover(this);" onMouseOut="mouseout(this);"
onMouseDown="mousedown(this);" onMouseUp="mouseup(this);"
onClick="wrapSelection(thisForm.textfeld,'<i>','</i>');" src="italic.gif"
title="Hier klicken um den markierten Text schräg zu stellen"> <img class="buttons" onMouseOver="mouseover(this);" onMouseOut="mouseout(this);"
onMouseDown="mousedown(this);" onMouseUp="mouseup(this);"
onClick="wrapSelection(thisForm.textfeld,'<strong><font color=#FF0000>','</font></strong>');" src="redbold.gif"
title="Hier klicken um den markierten Text rot und dick zu verändern">
<img class="buttons" onMouseOver="mouseover(this);" onMouseOut="mouseout(this);"
onMouseDown="mousedown(this);" onMouseUp="mouseup(this);"
onClick="wrapSelectionWithLink(thisForm.textfeld);" src="link.gif" width=32 height=16 align="middle"
title="Hier klicken um einen Hyperlink aus dem markierten Text zu machen">
</div>
<p> <span class="ueberschrift3">
<textarea name="textfeld" id="textarea5" cols="80" rows="10"></textarea>
</span></p></td>
</tr>
</table>
</form>
</body>
</html>
[CODE]

Das kann man noch prima ausbauen...

viel spaß
chris_xn