Discussion :

[paulolol]

Bonjour,

J'aurais besoins d'une petite fonctions pour faire un retour à la ligne automatique dans ma TextArea.

Plus précisément, je voudrais que si une des ligne a une largeur supérieure à 16 caractères, que ça détecte où se situe le dernier espace (pour ne pas couper les mots en deux) et que ça mette un retour à la ligne à la place de cet espace. Le tout si possible sans changer la position du curseur dans la TextArea, ce qui n'est pas le cas du code que j'avais essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function ralAuto(input){
  var lines = input.value.split(String.fromCharCode(13));
  for(var i = 0;i < lines.length;i++){
    var vi = reverse(lines[i]);
    var n = vi.indexOf(" ");
    if (vi.length > 16){
      vi = vi.replaceAt(n,String.fromCharCode(13));
      lines[i] = reverse(vi);
    }
    if(i === 0){
      input.value = lines[0];
    }else{
      input.value += lines[i];
    }
  }
}
 
//Reverse function :
function reverse(s) {
  var o = '';
  for (var i = s.length - 1; i >= 0; i--)
    o += s[i];
  return o;
}
 
//replaceAt function :
String.prototype.replaceAt=function(index, character) {
    return this.substr(0, index) + character + this.substr(index+character.length);
};

En gros, il split le contenu de mon input (ici ma textarea) et met chaque ligne dans un array.
Ensuite, pour chaque ligne, il la met à l'envers et cherche la position du premier espace (le dernier quand on est à l'endroit).
Si la longueur est supérieure à 16 caractères, on remplace le caractère la position de l'espace par un retour à la ligne.
Puis on remet les lignes dans la textarea.

Ce code marche pour la première ligne de ma textarea, puis met un retour à la ligne après chaque caractère (il faut savoir que cette fonction est exécutée par l'event onInput de ma textarea, donc la fonction ne doit si possible pas bouger le curseur pour ne pas gêner l'écriture).

Merci d'avance,
Paul

[Darkaurora]

Un premier élément de réponse ici: https://jsfiddle.net/90se4m66/3/

Ta principale erreur est l'utilisation du charCode 13 au lieu de 10, cependant le code ci dessus n'a été testé que sur chrome il sera nécessaire de le tester sur IE par exemple car je suis presque certains qu'il demandera une adaptation.

Ton algo n'était pas mal cependant tu as fait une erreur lorsque tu remplaces l'espace à une position donnée puis que tu réinjectes une chaîne scindée par un line breaks dans ton tableau.

Donc la différence majeur se trouve ici:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
vi = vi.replaceAt(n, String.fromCharCode(10));
[].splice.apply(lines, [i, 1].concat(reverse(vi.split(String.fromCharCode(10)))));

Sur la deuxième instruction je spécifie que je souhaite supprimer la chaine à l'indice i et le remplacer par les éléments du tableau retournés vi.split(String.fromCharCode(10))Pour information (ne sachant pas si tu es coutumier) j'utilise l'a méthode apply afin de passer une liste d'arguments via un tableau, bien pratique dans ce cas (cf ici pour la doc).

Edit: la correction fournis ne gère pas si l'utilisateur a lui même fait un retour à la ligne!

[sekaijin]

Sorry mais je ne vois pas l'utilité

un simple attribut wrap sur le textarea et c'est fait

http://www.w3schools.com/tags/att_textarea_wrap.asp

A+JYT

[Darkaurora]

Tout à fait d'accord avec toi sekaijin, cependant je n'ai pas essayé de présumer sur l'utilité du script j'ai seulement répondu à la consigne

[paulolol]

Salut et merci pour vos réponses.

Je ne peut pas utiliser l'attribut wrap parce que ma textarea a dans son css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width: 100%;

Donc l'attribut cols ne prends plus effet.

EDIT: C'est très bien, il ne faut pas qu'elle prennent en compte les retours à la ligne de l'utilisateur. Merci beaucoup.

EDIT2 : Hola y a un problème : quand les lignes font + de 16 caractères mais qu'il n'y a pas d'espaces ça bug complètement. Si il n'y a pas d'espaces, vi.indexOf(" ") serait égal à null ?

[Darkaurora]

Il suffit simplement de faire une césure automatique si indexOf retourne -1:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

vi = vi.replaceAt(n === -1 ? 0 : n, String.fromCharCode(10));

https://jsfiddle.net/90se4m66/4/

[paulolol]

Euhm ça marche bien sauf qu'au lieu d'un replaceAt il faudrait insérer un retour à la ligne, pour éviter de supprimer la dernière lettre du long mot.
Je n'ai pas pu apporter un correctif moi-même car j'ai du mal avec la formulation (n === -1 ? 0 : n)...

EDIT : J'ai réussi mais sans me passer d'un if, si tu as une idée pour optimiser ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if (n === -1){
      vi = vi.substr(0, vi.length - 16) + String.fromCharCode(10) + vi.substr(vi.length - 16, vi.length);
}else{
      vi = vi.replaceAt(n, String.fromCharCode(10));
}