Javascript - Einfügen von Leerzeichen nach Zahlen in Textfeldern

Question

Ich bin auf der Suche nach einer Möglichkeit, ein Leerzeichen nach 4 Ziffern in einem Textfeld einzufügen.

Beispiel: XXXX XXXX XXXX

Ich habe in der Lage, ohne Abstand den Abstand ohne Pfeiltasten oder die Pfeiltasten zu bekommen.

Ich habe in this Frage und ein paar andere auf der Website untersucht, aber ich konnte das Problem der Rücktaste und der Pfeiltasten nicht lösen.

Hier ist mein Code:

function isNumber(event) { 
    event = (event) ? event : window.event; 
    var charCode = (event.which) ? event.which : event.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
     return false; 
    } 
return true; 
} 

Und hier ist ein JSFiddle dafür. Diese ist sehr nahe, aber ich habe nicht ganz richtig den Abstand.

Kann ich das mit meiner aktuellen Funktion machen oder muss ich das anders angehen?

BEARBEITEN: Ist es möglich, Pfeiltaste-Funktionalität hinzuzufügen, ohne dass der Cursor nach der Freigabe in den Hintergrund zurückkehren kann?

Answer 1

Demo

Problem ist Sie Tastendruck-Ereignisse verwendet haben.

<input type="text" id="test" maxlength="14" name="test" 
    onkeyup="return isNumber(event)" /> 

gleiche Funktion aus der Antwort, die Sie

bezeichnet

function isNumber(e) { 
    e.target.value = e.target.value.replace(/[^\dA-Z]/g, ''). 
         replace(/(.{4})/g, '$1 ').trim(); 
} 

This Article wird deutlich erklären, warum keyup und keydown Veranstaltung funktioniert, aber nicht keypress

Um Pfeiltasten Demo

Sie zu ermöglichen müssen Verwenden Sie keydown Ereignis

Answer 2

I sugest Sie verwenden oninput Ereignis, das sich um Keyword-Paste und Maus

<input type="text" id="test" maxlength="14" name="test" oninput="return isNumber(event)" /> 

js Paste nimmt:

function isNumber(e) { 
    e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
} 

Answer 3

ich sehe, warum Sie kleben mit dem Tastendruck-Ereignis, so diese Funktion sollte machen was du machen willst.

Bitte lesen Sie die Hinweise in den kommentierten Bereich, ich versuche zu erklären, was es tut.

Ich bin noch nicht sehr gut mit Regex, aber dank der anderen Antwort, denke ich, dass dieser am besten funktioniert.

-Code mit REGEX von @Gops AB:

function isNumber(event,el) { 
    event = (event) ? event : window.event; 

    var charCode = (event.which) ? event.which : event.keyCode; 

     if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
     return false; 
    } 
    //Add a space after 4 numbers. 


    var v=el.value + String.fromCharCode(charCode); //Keypress does not let us see the value of the text box after the press, so we have to add the string to our comparison. 
    v=v.replace(/\s/g,''); 

    el.value=v.replace(/(.{4})/g, '$1 ').trim(); // using regex from other answer. Thanks @Gops AB for the example 
    return false; 
} 

Demo mit Regex mit: http://jsfiddle.net/gregborbonus/Lm2hS/3208/

Answer 4

Hier ist die Kurzschrift effizienteste Weg:

// HTML

<input type="text" id="cc" name="cc" maxlength="19"> 

// JS