Comment savoir à quel caractère il change à une autre ligne dans une zone de texte?

Question

Zone de texte:

Il n'y a pas ENTER à la fin de la première ligne et est-il une solution pour savoir à quel caractère il se tourne vers la ligne suivante? Prenez ceci par exemple, il passe à la ligne suivante après le caractère "哪" ou après le 13ème caractère. (Le cas SBC ou les caractères de cas DBC peuvent être saisis.)

Answer 1

Eh bien, lorsque vous créez une zone de texte, vous êtes censé fournir le nombre de colonnes, donc si c'est l'emballage parce qu'il est arrivé à la fin de la ligne, il semble juste de supposons que le nombre de caractères est le nombre de colonnes que vous avez spécifié. Ou est-ce que je manque quelque chose?

Answer 2

L'attribut cols détermine la largeur de l'élément textarea mais est généralement remplacé par une feuille de style et la propriété width. Même sans une largeur définie par CSS, cols n'est pas strictement appliquée par la plupart des navigateurs (dans Chrome au moins, il est précis tant que la barre de défilement verticale est présente), et les lignes sont généralement entourées de limites de caractères non caractère.

Voici une solution laide, mais cela devrait fonctionner. L'idée est de définir la hauteur de l'élément textarea sur 0 puis de supprimer les mots de la fin de sa chaîne de valeur un à la fois, et de vérifier la propriété scrollHeight pour les modifications.

//make scrollbars take up space even when they are not needed 
//necessary to keep space available for text constant 
txtarea.style.overflow = 'scroll !important'; 
txtarea.style.height = '0px !important'; 
var tmpvalue = txtarea.value; 
var currentscroll = txtarea.scrollHeight; 
var wrapat = []; 


var parts; 

//Regex breaks textarea value into ['every word but the last', 'one'] 
while (parts = txtarea.value.match(/([^\0]*)\s\w*/m)) { 

    txtarea.value = parts[1]; 

    //scrollHeight has changed, add wrap index to array 
    if (txtarea.scrollHeight < currentscroll) { 

     wrapat.push(txtarea.value.length-1); 
     currentscroll = txtarea.scrollHeight; 

    } 
} 

//sort wrap array for niceness 
wrapat = wrapat.sort(function(a,b) { return a-b; }); 

//restore everything to normal 
txtarea.value = tmpvalue; 
txtarea.style.height = '';` 

Essayez le code ici http://jsbin.com/alasa3/edit

Il y a probablement des bugs, par exemple ce code ne gère pas longs tels que les « mots » URL qui pourrait se casser en deux. Il faut aussi un peu de calcul supplémentaire pour déterminer si une ligne a été automatiquement emballée ou à cause d'une nouvelle ligne (quelque peu traitée dans le code du lien), et elle pourrait avoir des problèmes avec les mots séparés par plusieurs espaces/nouvelles lignes. Mais c'est l'idée de base.

S'il existe une solution plus simple, je ne suis pas au courant.