Inclure l'espace comme caractère de sortie acceptable

Question

J'ai une div divisible avec un identifiant de "modifiable" dans lequel j'ai simulé la modification du caractère associé à un événement clé. Vous pouvez le voir en action ici: http://jsfiddle.net/Ukkmu/66/

Comme vous pouvez le voir, peu importe quelle touche alphanumérique l'utilisateur appuie, la chaîne de sortie de "Singinme". types dans la div. Les espaces entre les mots de ma liste var sont ignorés. Je voudrais que la sortie inclue des espaces, et lire "Chante en moi". comme il est actuellement écrit dans la première ligne de mon code javascript. J'ai obtenu de l'aide pour au moins identifier que mon problème est dans la fonction insertTextAtCursor, mais comment puis-je changer cette fonction pour inclure l'espace comme un caractère de sortie acceptable? Ou, pourrais-je réécrire ma liste var d'une manière qui pourrait être "Sing in me". dans la div? Par commodité, j'ai également collé le javascript ci-dessous. PS: Je viens de découvrir qu'il s'agit d'un problème de navigateur. Dans Chrome, c'est comme je l'ai décrit. Dans IE, ça marche comme je le veux: "Chante moi". avec des espaces. Des idées pour faire fonctionner cela dans Chrome? Je ne sais pas si cela fonctionne dans Firefox.

var list = "Sing in me.".split(''); 
function transformTypedCharacter(charStr) { 
    return (/[a-zA-Z]/).test(charStr) ? list.shift()||" " : charStr; 
} 

function insertTextAtCursor(text) { 
    var sel, range, textNode; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0).cloneRange(); 
      range.deleteContents(); 
      textNode = document.createTextNode(text); 
      range.insertNode(textNode); 

      // Move caret to the end of the newly inserted text node 
      range.setStart(textNode, textNode.length); 
      range.setEnd(textNode, textNode.length); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.pasteHTML(text); 
    } 
} 


$("#editable").keypress(function(evt) { 
    if (evt.which) { 
     var charStr = String.fromCharCode(evt.which); 
     var transformedChar = transformTypedCharacter(charStr); 
     if (transformedChar != charStr) { 
      insertTextAtCursor(transformedChar); 
      return false; 
     } 
    } 
}); 

Answer 1

Chrome avale les nœuds d'espace blanc. Je ne peux pas dire si c'est un bogue ou non, car il semble que plusieurs navigateurs traitent différemment les espaces et les nœuds vides.

Dans votre cas, une solution simple utilise des espaces insécables à la place. C'est:

var list = "Sign\xA0in\xA0me.".split(""); 

Ou

var list = "Sign in me.".replace(/\s/g, "\xA0").split("") 

Answer 2

Ce n'est pas sur les espaces, pour une solution à ce contrôle @Alexander's great response. Ceci concerne d'autres problèmes dans votre code. Tout d'abord, vous ne faites correspondre que les caractères d'entrée a-z et A-Z. Comme dans, vous ne remplacez pas les frappes telles que periods, space, numbers, non-ascii lettres etcetera. Deuxièmement, au lieu de déplacer le tableau, vous devez rechercher le caractère à la position dans l'entrée. Avec votre code, vous pouvez supprimer le texte et il ne sera pas remplacé à nouveau.

function transformTypedCharacter(charStr) { 
    var position = $("#editable").text().length; 
    if (position >= list.length) return ''; 
    else return list[position]; 
} 

Jumelez cela avec la réponse d'Alexander et you're home free!