Texteingabezeile mit Zeichencounter

Y

YU-Koda

Mitglied
Hier erst mal mein Quelltext:

<form name="postframe" method=post action="jfchat--sid--" target="dummy" onSubmit="return clientpush(this)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="606">
<input type="hidden" value="1" name="auth">
<input type="hidden" value="--did--" name="design">
<p align="left"><font color="#ababab">
<input name="say" size=55 maxlength=1000 autocomplete="off">
</font>
<select name="fwcaction" size="1" onChange="if(this.options[this.selectedIndex].value != -1){ document.postframe.say.value=document.postframe.fwcaction.options[document.postframe.fwcaction.selectedIndex].value;document.postframe.submit();document.postframe.say.value=''}">
<option value="-1" selected>Raumwahl:</option>
<option value="/j lounge">Lounge</option>
<option value="/j cafe">Cafe</option>
<option value="/j music">Music</option>
<option value="/j chillout">Chillout</option>
<option value="/j fol-treff">Fol-Treff</option>
<option value="/j love">Love</option>
<option value="/j boysroom">Boysroom</option>
<option value="/j girlsroom">Girlsroom</option>
<option value="/j plauderecke">Plauderecke</option>
<option value="/j workshop">Workshop</option>
<option value="/j quizraum">Quizraum</option>
</select><div align="left">
<b>
<font color="#000000">Communityfenster </font>
<font color="#FFFFFF">
<a target="_blank" href="jfchat--sid--?auth=0&showhtml=comframeset&design=--did--">
öffnen</a></font></b></div></td>
</tr>
</table>
</form>

Ich möchte jetzt ein Counter zu meiner Eingabezeile (<input name="say" size=55 maxlength=1000 autocomplete="off">) haben. Der soll auch so aussehen wie die eingabezeile, also so was wie ein inputzähler. :) Der Zähler soll die angegeben Zeichen (in dem Fall sind es 1000) herunterzählen, damit man sehen kann, wieviel Zeichen noch übrig bleiben :) Dieser formtag sollte nach möglichkeit nicht verändert werden :) Halt nur den Counter zufügen ;) Danke im Voraus :-D
 
Hallo...

an die Anzahl der eingegebenen Zeichen kommst du über die Eigenschaft "length" des "value" des Eingabefeldes:
Code: 
document.postframe.say.value.length;
Diesen Wert von 1000 abzuziehen und in einem anderen <input> auszugeben, sollte dann nicht mehr schwer fallen :)

Anstossen würde ich das ganze beim "onkeyup" und "onchange" des Eingabefeldes.

Dass der Counter nicht geändert werden kann, erreichst du über das Attribut "readonly" in selbigem.
 
Zuletzt bearbeitet:
Hmm, wäre es möglich, wenn Du mir kurz zeigen könntest, wie das aussehen könnte? Weil das Postframe habe ich nicht selber entwickelt, gehört zur Chatsoftware und was Sachen Javascript angeht.........ist für mich noch ein ziemlich weitläufiges Gebiet wo ich wohl noch Anfänger bin. Schönen Dank im voraus
 
Die beiden <input>'s sollten ca. so aussehen:
Code: 
<input type="text"readonly name="counter"size="4">
<input onkeyup="count(this)"onchange="count(this)"name="say" size="55" maxlength="1000" autocomplete="off">
und die Funktion dazu:
Code: 
<script type="text/javascript">
<!--
function count(obj)
{
obj.form.counter.value=1000-obj.value.length;
}
//-->
</script>
 
Hey genau. Damit hast Du genau auf den Punkt getroffen was ich meine ;) Der Zählt alles, so wie ich das meinte ;) Aber ich habe ein kleines Problem. Wenn ich das nun mit in dem formtag einfüge, kann ich schreiben, zählt auch wie der sollte :) Aber....da kommt leider noch ein Aber. Der sendet dann leider den Text nicht mehr ab und lässt den Text den ich abschicken will in der Zeile stehen. Aber du hast gemerkt was ich meine ;) Das war schon mal ganz gut. Ich poste mal hier den vollständigen code vom template. Vielleicht hatte ich dir vergessen was zu zeigen, weil es ja nur nen kleiner ausschnitt war ;)

*EDIT*

Ich hab jetzt gerade gesehen, dass im oberen Bereich ein onkeydown vorkommt. Der bezweckt dass beim Hochdrücken der Pfeiltasten die letzten 20 Sätze gespeichert werden. Also zumindest ist es Teil davon. Weiss nun nicht ob da ein onkeyup gut kommt
nixweiss.gif





<HTML>
<HEAD>
<TITLE>Postframe</TITLE>
<script src="../v2.js" type="text/javascript"></script><script for="document" event="onkeydown()" language="JScript" type="text/jscript">
{ checkkey(window.event.keyCode); }
</script><script type="text/javascript">
<!--
var Netscape = new Boolean();
if(navigator.appName == "Netscape") Netscape = true;

function TasteGedrueckt(Ereignis)
{
checkkey(Ereignis.which);
}
if(Netscape)
{ document.onkeydown = TasteGedrueckt; }
//-->
</script><!-- so führt man befehle aus über links--><script type="text/javascript">
<!--
function say(was) {
document.postframe.say.value=was;
document.postframe.submit();
document.postframe.reset();
document.postframe.say.focus();
}

//-->
</script></HEAD>
<BODY onbeforeunload="javascript:say('/q')" onunload="javascript:say('/q')" bgcolor="#AFC6DB" bgproperties="fixed" link="#000000" vlink="#000000" alink="#CC3300"><form name="postframe" method=post action="jfchat--sid--" target="dummy" onSubmit="return clientpush(this)">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="610">
<input type="hidden" value="1" name="auth">
<input type="hidden" value="--did--" name="design">
<p align="left"><font color="#ababab">
<input name="say" size=55 maxlength=1000 autocomplete="off">
</font>
<select name="fwcaction" size="1" onChange="if(this.options[this.selectedIndex].value != -1){ document.postframe.say.value=document.postframe.fwcaction.options[document.postframe.fwcaction.selectedIndex].value;document.postframe.submit();document.postframe.say.value=''}">
<option value="-1" selected>Raumwahl:</option>
<option value="/j lounge">Lounge</option>
<option value="/j cafe">Cafe</option>
<option value="/j music">Music</option>
<option value="/j chillout">Chillout</option>
<option value="/j fol-treff">Fol-Treff</option>
<option value="/j spacefun">Spacefun</option>
<option value="/j love">Love</option>
<option value="/j boysroom">Boysroom</option>
<option value="/j girlsroom">Girlsroom</option>
<option value="/j plauderecke">Plauderecke</option>
<option value="/j workshop">Workshop</option>
<option value="/j quizraum">Quizraum</option>
</select>
<div align="left">
<b>
<font color="#000000" face="Verdana" size="1">Communityfenster </font>
<font color="#FFFFFF" face="Verdana" size="1">
<a target="_blank" href="jfchat--sid--?auth=0&showhtml=comframeset&design=--did--">
öffnen</a></font></b><font color="#000000" style="font-size: 8pt" face="Verdana">
|</font><b><font color="#000000" face="Verdana" size="1"> Zugang </font>
<font color="#FFFFFF" face="Verdana" size="1">
<a target="_blank" href="http://www.vip.yunity.de">VIP-Portal:</a> </font>
<font color="#008000" face="Verdana" size="1">aktiviert</font></b></div></td>
</table>
</form>
</BODY></HTML>
 
Zuletzt bearbeitet:
Hallo...

Merkwürdig.... das "onkeyup" sollte das "onkeydown" eigentlich nicht stören.
Um genau sagen zu können, was da passiert, müsste man die externe JS-Datei sehen(v2.js) ...im speziellen die
Funktion "clientpush()" .... da diese die Möglichkeit hat, das Senden abzubrechen.
 
Also, das stammt jetzt aus der v2.js




var msgbuffer= new Array(20);

var selector=-1;

msgbuffer[20]="";

msgbuffer[19]="";

msgbuffer[18]="";

msgbuffer[17]="";

msgbuffer[16]="";

msgbuffer[15]="";

msgbuffer[14]="";

msgbuffer[13]="";

msgbuffer[12]="";

msgbuffer[11]="";

msgbuffer[10]="";

msgbuffer[9]="";

msgbuffer[8]="";

msgbuffer[7]="";

msgbuffer[6]="";

msgbuffer[5]="";

msgbuffer[4]="";

msgbuffer[3]="";

msgbuffer[2]="";

msgbuffer[1]="";

msgbuffer[0]="";





function init()

{

document.postframe.say.value='';

document.postframe.say.focus();

}





function addmsg(msg)

{

msgbuffer[20]=msgbuffer[19];

msgbuffer[19]=msgbuffer[18];

msgbuffer[18]=msgbuffer[17];

msgbuffer[17]=msgbuffer[16];

msgbuffer[16]=msgbuffer[15];

msgbuffer[15]=msgbuffer[14];

msgbuffer[14]=msgbuffer[13];

msgbuffer[13]=msgbuffer[12];

msgbuffer[12]=msgbuffer[11];

msgbuffer[11]=msgbuffer[10];

msgbuffer[10]=msgbuffer[9];

msgbuffer[9]=msgbuffer[8];

msgbuffer[8]=msgbuffer[7];

msgbuffer[7]=msgbuffer[6];

msgbuffer[6]=msgbuffer[5];

msgbuffer[5]=msgbuffer[4];

msgbuffer[4]=msgbuffer[3];

msgbuffer[3]=msgbuffer[2];

msgbuffer[2]=msgbuffer[1];

msgbuffer[1]=msgbuffer[0];

msgbuffer[0]=msg;

}



function clientpush(form)

{

form.submit();

addmsg(form.say.value);

selector=-1;

clearmessage(form);

return (false);

}



function clearmessage(form)

{

form.say.value='';

form.say.focus();

}



function msg_up()

{



selector++; if (selector>20) selector=20;

document.postframe.say.value=msgbuffer[selector];

document.postframe.say.focus();



return(false);

}



function msg_down()

{



selector--; if (selector<0) {

selector=0;

document.postframe.say.value="";

} else {

document.postframe.say.value=msgbuffer[selector];

document.postframe.say.focus();

}



}

function checkkey(thekey)

{

if(thekey=='38')

{

msg_up();

}

if(thekey=='40')

{

msg_down();

}

}
 
Ich muss gestehen, ich bin höchst erstaunt :-)

Es liegt anscheinend nicht an den Skripten, sondern an der Tatsache, dass sich mit dem Counter nunmehr 2 Textfelder im
Formular befinden.... da wird das Formular nicht mehr beim Betätigen von [ENTER] gesendet

....sofern sich kein Submit-Button im Formular befindet.

... ist mir noch nie aufgefallen:eek:

Die Lösung daher: Du musst einen Submit-Button ins Formular hineintun...auch wenns nicht unbedingt ins Design passt:(
Du könntest ja ein <input type="image"> nehmen, und dort als src ein transparentes Pixel-Gif...das wäre nicht zu sehen, würde den
Zweck aber auch erfüllen.

Mit dem Counter usw. kann alles bleiben, wie es ist.
 
Zuletzt bearbeitet:
Ok, so weit habe ich das ;) Zeile sendet auch ab. Ich hab ein leer.gif einfach reingeklatscht und gedehnt. Aber ein kleines Problem habe ich noch. Die Schriftfarbe hat die des Hintergrund. Zumindest sieht man da jetzt keine Zahl nix *g*

Nun sieht der input so aus:

<input type="image"readonly name="counter"size="4" src="../gfx/leer.gif" width="54" height="18" style="color: #000000">

Nur das man keine Zahlen sieht. irgendwie *g*
 
Nö...der Submit-Button(das transparente GIF) muss zusätzlich zum Counter hinein...irgendwo innerhalb des Formulars
:)
Code: 
<input type="image"src="../gfx/leer.gif" width="1" height="1" >
<input type="text"readonly name="counter"size="4" >
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück