2011-01-16 4 views
2

Ich versuche, ein Skript mit jQuery zu schreiben, es wird automatisch ein Leerzeichen nach jedem Komma "," eingefügt, um eine Folge von Zahlen zu trennen, die Benutzer in ein Eingabefeld eingeben. z.B. wenn sie eingeben (45, 68, 95, 23), wird (45, 68, 95, 23), wenn sich der Benutzer vom Eingabefeld entfernt.Wie wird automatisch ein Leerzeichen nach jedem Komma in einem Textfeld mit JQuery eingefügt?

diese Erhielt zu überprüfen, ob die Eingabe ein Komma oder nicht

$("#test").blur(function() { 
    if(this.value.indexOf(",") !== -1) { 
     alert('got a comma'); 
    } 
}); 

Antwort

6

einfach den Eingabewert durch Komma geteilt, trim die Leerzeichen von jedem Element, dann verbinden Sie das resultierende Array wieder zusammen mit einem Komma und Leerzeichen.

$("#test").blur(function() { 
    this.value = $.map(this.value.split(","), $.trim).join(", "); 
}); 
+1

+1 nur für die selten gesehene Freude an einer Bibliotheksfunktion als Lambda übergeben. – Phrogz

+1

@Phrogz, was bedeutet das? – qwertymk

+1

@qwertymk Der zweite Parameter zu '$ .map (...)' muss eine Funktion sein. Normalerweise würden Sie etwas sehen wie: '$ .map (..., function (s) {return ...});' aber Todd hat hier eine existierende jQuery-Funktion wiederverwendet und sie übergeben, indem sie ihre Referenz ohne das Folgende zur Verfügung gestellt hat Klammern, die dazu führen würden, dass es sofort aufgerufen wird. – Phrogz

0
this.value=this.value.replace(/,/gim,', '); 
+0

@anonymous 'String.prototype.replace' ist nicht muting in JavaScript. – Phrogz

+0

Ich weiß nicht einmal, was das bedeutet. Könnten Sie nicht einfach die Funktion String() verwenden, wenn der Typ ein Problem ist? –

+0

@ Anonymous Ich meine, dass das Aufrufen des 'replace' auf dem' value' den Wert nicht ändert; Es wird nur eine neue Zeichenfolge zurückgegeben. Du brauchst 'this.value = this.value.replace ...'. Es gibt auch keinen Grund für die Modifizierer "i" oder "m" in Ihrem Regex. – Phrogz

6
$('#test').blur(function(){ 
    $(this).val(function(i,oldValue){ 
    return oldValue.replace(/,\s*/g, ', '); 
    }); 
}); 

hat Oder mit weniger jQuery:

$('#test').blur(function(){ 
    this.value = this.value.replace(/,\s*/g, ', '); 
}); 
+1

Mit noch weniger 'jQuery':' document.getElementById ('test'). Onblur = function() {this.value = this.value.replace (/, \ s */g, ','); }; ' –

+3

Äh ... die erste Methode ist völlig unnötig, da die zweite in jeder Hinsicht überlegen ist. –

+2

@JacobRelkin Heh :) Natürlich leidet dies an dem unwahrscheinlichen Problem, mehrere Unschärfehandler an das Element anhängen zu müssen, aber immer gut, um die Bevölkerung über Nicht-jQuery-Optionen zu informieren. +1 für Humor und Einbeziehung aller geeigneten Semikolons. – Phrogz

0

regex verwenden, wird dies die Leer um jedes Komma eins nach U + 0020 Leerzeichen normalisieren, geschieht, wenn das Textfeld nach dem Wert geändert Fokus verliert. Es trimmt auch Leerraum (oder ein Streu Komma) vom Anfang und Ende:

$("#test").change(function() { 
    this.value = this.value.replace(/\s*,\s*/g, ', ').replace(/^,?\s*|,?\s*$/g, ''); 
}); 

Regex auch hilfreich ist, den Benutzer zu sagen, ob seine Eingabe gültig ist oder nicht. Try this demo:

$("#test").focus(function() { 
    $(this).removeClass('valid invalid'); 
}).blur(function() { 
    this.value = this.value.replace(/\s*,\s*/g, ', ').replace(/^,?\s*|,?\s*$/g, ''); 
    if(/^(?:[\d.](?:,)?)*$/.test(this.value)) { 
     $(this).addClass('valid'); 
    } else { 
     $(this).addClass('invalid'); 
    } 
}); 
Verwandte Themen