11549 sujets

JavaScript, DOM et API Web HTML5

Selection partie gauche d'un texte depuis le curseur

Voila ce que je cherche à faire:

Il me faut une fonction Javascript qui soit capable de me retourne une chaine de caractères qui est la sous-chaine comprise entre le début et la position courante du curseur dans un TextBox.

ex: Le TextBox est vide, je tappe "bonjour comment vas tu ?", la fonction me renvoi "bonjour comment vas tu ?" (le curseur étant encore placé à la fin de la chaine). Maintenant, je clic entre les 2 "m" du mot "comment", la fonction doit me renvoyer "bonjour com"

Cette fonction doit tourner sous IE et FF
Sous FF, pas de problème, chaine.selectionStart me renvoit un Integer représentant la position courante du curseur, il suffit donc après de faire un chaine.subString(0,chaine.selectionStart) et ca fonctionne, par contre, sous IE, chaine.selectionStart ne fonctionne pas, et rien ne me permet de récupérer la position du curseur. On peut récupérer le texte sélectionné, y ajouter du texte avant ou après, mais pas connaitre le position du curseur ou bien le texte avant la sélection...

merci par avance pour vos idées !!

NiHaoMa
J'ai quelque chose de vraiment pas beau à te proposer mais qui à le mérite de fonctionner sous IE :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script>
function getPosition(myField, myValue) {
    //IE support
    if (document.selection) 
    {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = "//token de separation//";
    }
    tbx = document.Form1.textbox.value;
    rst = document.getElementById("result");
    rst.innerText = tbx.substring(0,tbx.indexOf("//token de separation//",1));
    document.Form1.textbox.value = tbx.replace("//token de separation//",'');
}
</script>
</head>

<body>
<form name="Form1">
    <input value="fdjkls jfl" onclick="getPosition(document.Form1.textbox,'fdjklfjdsl')" id="textbox" type="text" />
    <p id="result"></p>
</form>
</body>
</html>


On doit quand même pouvoir trouver mieux ? Smiley confus
Modifié par mathmax (31 Jan 2007 - 13:34)
salut mathmax,

merci d'avoir prit le tps de répondre.

Effectivement ce n'est pas très jolis, ca marche certe, mais bon j'avoue que si je pouvais trouver mieux je préfèrerai...
en tous cas merci pour l'idée, j'y reviendrai si vraiment je ne trouve rien d'autre.

NiHaoMa
Regarde là. Il y a d'autre solutions proposées. Elles sont un peu plus longues que la mienne, mais peut-être plus propres...
Modifié par mathmax (31 Jan 2007 - 14:12)
re,

c'est amusant, j'étais sur la meme page y'a quelques minutes lol

j'ai finalement réussi à trouver un truc fait par microsoft...ce n'est pas génial, mais ca fonctionne en peu de ligne....je continue mes investigations, mais je le donne ici au cas ou ca interesse quelqu'un:


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function saveCaret(elem)
{
  if ( elem.isTextEdit ) 
    elem.caretPos = document.selection.createRange();
}
function getCaretPos(elem)
{
  if ( elem.isTextEdit && elem.caretPos )
  {
    var bookmark = "~";
    var orig = elem.value;
    var caretPos = elem.caretPos;
    caretPos.text = bookmark;
    var i = elem.value.search( bookmark );
    window.status = "Caret is at character " + i;
    elem.value = orig;
  }
}
</SCRIPT>
</HEAD>

<BODY>
<INPUT NAME="txtInput" ONSELECT="saveCaret(this)" 
   ONCLICK="saveCaret(this)" ONKEYUP="saveCaret(this)" VALUE="Where are you?">
<INPUT TYPE="button" VALUE="caret pos" ONCLICK="getCaretPos(txtInput)">
</BODY>
</HTML>
Cette fonction fait la même chose que la mienne. Smiley biggrin Elle insère un caractère ou une série de caractère reconnaissable à l'endroit du curseur, elle détermine la position de ce caractère dans la chaîne puis elle restitue la chaîne d'origine. Si c'est un truc proposé par microsoft, je crois que tu peux arrêter tes recherches là, tu ne trouveras pas mieux à mon avis. Smiley cligne
Modifié par mathmax (31 Jan 2007 - 14:37)
j'ai finalement opter pour ceci:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor,  www.pspad.com">
 
  <title></title>
  <script language="javascript">

  var is_gecko = /gecko/i.test(navigator.userAgent);
  
  function getSelectionStart(input) {
  	if (is_gecko)
  		return input.selectionStart;
  	var range = document.selection.createRange();
  	var isCollapsed = range.compareEndPoints("StartToEnd", range) == 0;
  	if (!isCollapsed)
  		range.collapse(true);
  	var b = range.getBookmark();
  	return b.charCodeAt(2) - 2;
  } 

  function GetIt(oTXT)
    {
    document.getElementById(oTXT).focus();
    var Pos = getSelectionStart(document.getElementById(oTXT));
    document.getElementById("CurPos").value = Pos;
    }
    
  </script>
  </head>
  <body>

  <input type="text" id="MyTextBox" OnClick="GetIt('MyTextBox');" OnKeyUp="GetIt('MyTextBox');">
    <br><br>
  <input type="text" id="CurPos">

  </body>
</html>


merci encore !
Sujet clos
Aller à