Formatierte Zahleingabe in einem Formularfeld

[joergi-1969]

Hi,

ich versuche mit meinen bescheidenen Javascript Kenntnissen eine Zahlenreihe, die man in ein Formularfeld eingibt, direkt bei Eingabe zu formatieren. Das ganze funktioniert auch soweit einwandfrei. Auch mit Nachkommastelle. Wenn ich jedoch eine Zahl oder Zahlen in der Zahlenreihe korrigieren möchte, springt der Cursor bei Klick auf die entsprechende Position größtenteils an das Ende der eingegebenen Zahlenreihe.Habt Ihr evtl. eine Lösung für mein Problem? Vielen Dank im Voraus für Eure Hilfe

<script>
function Trenner(number)
{
number = "" + number;
if (number.length > 3) {
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : "");
for (i=0 ; i < Math.floor(number.length / 3); i++) {
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= "." + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

function euro()
{
var a1= document.getElementById("euro").value;
var a2=a1.replaceAll(".","");

var a3=a2.split(",");
var a4=a3[0];
var a5=a3[1];

if (a5>=0)
{
var a5=a5.substring(0, 2);
}

if (a5>=0)
{
var a6=Trenner(a4)+","+a5;
}
else
{
var a6=Trenner(a4);
}

document.getElementById("euro").value=a6;
}
</script>
<input type="text" id="euro" onkeyup="euro();" size="30">

[tk1234]

ich versuche mit meinen bescheidenen Javascript Kenntnissen eine Zahlenreihe, die man in ein Formularfeld eingibt, direkt bei Eingabe zu formatieren.

Und warum verwendest du nicht einfach ein input mit type=number? Ja, Tausendertrennzeichen gibt es dort nicht, aber dafür lässt sich der Wert mit den Pfeiltasten einstellen, der Dezimaltrenner ist automatisch für jeden Benutzer der richtige (kann auch ein Punkt sein, das hängt von den Einstellungen des Benutzers auf seinem Rechner ab) und die Eingabemöglichkeit für Smartphones usw. sind besser (Tastatur mit Ziffern).

Das ganze funktioniert auch soweit einwandfrei.

Nein, nicht wenn man Werte über die Maus einfügt (der input-Handler ist für Eingabefelder quasi immer besser).

Auch mit Nachkommastelle. Wenn ich jedoch eine Zahl oder Zahlen in der Zahlenreihe korrigieren möchte, springt der Cursor bei Klick auf die entsprechende Position größtenteils an das Ende der eingegebenen Zahlenreihe.Habt Ihr evtl. eine Lösung für mein Problem?

Evtl. hilft es die Cursorposition nach dem Formatieren wieder zu setzen (getSelection()/setPosition() sollten helfen da was zu basteln, ggf. auf den genannten Seiten weiter schauen), aber wie gesagt: spar dir die Mühe da was zu basteln und verwende ein number-input.

[joergi-1969]

Danke für die Antwort. Die Eingabe erfolgt ausschließlich über einen PC und die Tastatur. Ich möchte unbedingt erreichen, dass die Zahlenreihe direkt bei der Eingabe mittels tausendertrennzeichen formatiert wird. Die Befehle getselection bzw. getposition kann ich nicht umsetzen da ich nicht weiß, wie ich diese einbauen kann. Ich bin ratlos. Ich habe mir schon eine Alternative überlegt.Aber diese dient nur als Notlösung:

<script>
function Trenner(number)
{
number = "" + number;
if (number.length > 3) {
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : "");
for (i=0 ; i < Math.floor(number.length / 3); i++) {
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= "." + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

function euro()
{
var a1= document.getElementById("euro").value;
var a2=a1.replaceAll(".","");

var a3=a2.split(",");
var a4=a3[0];
var a5=a3[1];

if (a5>=0)
{
var a5=a5.substring(0, 2);
}

if (a5>=0)
{
var a6=Trenner(a4)+","+a5;
}
else
{
var a6=Trenner(a4);
}

document.getElementById("euro").value=a6;
}

function euro_reset()
{
var a1= document.getElementById("euro").value;
var a2=a1.replaceAll(".","");
document.getElementById("euro").value=a2;
}


</script>
<input type="text" id="euro" onMouseout="euro();"  onMouseover="euro_reset();" size="30">

.

[joergi-1969]

Ich habe jetzt lange herumexperimentiert und denke, dass meine Notlösung die beste Alternative ist. Ich habe den script noch einmal verbessert

<script>
function Trenner(number)
{
number = "" + number;
if (number.length > 3) {
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : "");
for (i=0 ; i < Math.floor(number.length / 3); i++) {
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= "." + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

function num_group(id)
{
var a1= document.getElementById(id).value;
var a2=a1.replaceAll(".","");
var a3 = a2.replaceAll(/[^0-9,]+/g, "");
var a4 = a3.replaceAll(/[,]{2,}/g, ",");
var a5=a4.split(",");
var a6=a5[0];
var a7=a5[1];
if (a7>=0)
{
var a7=a7.substring(0, 2);
}
if (a7>=0)
{
var a8=Trenner(a6)+","+a7;
}
else
{
var a8=Trenner(a6);
}
document.getElementById(id).value=a8;
}

function num_group_reset(id)
{
var a1= document.getElementById(id).value;
var a2=a1.replaceAll(".","");
document.getElementById(id).value=a2;
}

</script>
<input type="text" id="preis" onblur="num_group('preis');"  onMouseover="num_group_reset('preis');" onfocus="num_group_reset('preis');" size="30" value="122334455664544">

<script>
num_group('preis');
</script>

[tk1234]

Ich habe jetzt lange herumexperimentiert und denke, dass meine Notlösung die beste Alternative ist.

Wenn es dir gefällt … ich finde das verhalten eher verwirrend als hilfreich: wenn man das Feld verlässt und dann nochmal mit der Maus darüber fährt (ohne klicken) wird die Formatierung gelöscht, beim Verlassen mit der Maus aber nicht wieder hergestellt.

Ich habe den script noch einmal verbessert

Zu Verbessern gäbe es da schon noch einiges: keine Eventhandler im HTML-Code und vor allem aber sprechende Variablen - a1 bis a8 ist so ziemlich die schlechteste Wahl für Variablennamen. Und: verwende nicht var zum Definieren von Variablen sondern const und let und beende Anweisungen mit einem Semikolon.

Die Eingabe erfolgt ausschließlich über einen PC und die Tastatur. Ich möchte unbedingt erreichen, dass die Zahlenreihe direkt bei der Eingabe mittels tausendertrennzeichen formatiert wird.

Warum? Und kannst du garantieren dass das immer über PC eingegeben wird? Mal abgesehen davon dass ein number-input noch mehr Vorteile hat …

Die Befehle getselection bzw. getposition kann ich nicht umsetzen da ich nicht weiß, wie ich diese einbauen kann.

Dann solltest du es einfach mal versuchen und deinen Versuch dann posten - aber vorkauen werde ich es dir nicht, erarbeiten musst du dir das schon selbst.