Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] pamiętaj położenie kursora (karetki)
Forum PHP.pl > Forum > Przedszkole
wujekk13
27.11.2013, 13:17:23
Witam,
kolejny problem, który napotkałem odnosi się do funkcji "d(x)":

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html lang="pl" dir="ltr">
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. </head>
  6.  
  7. <body>
  8.    <script language="JavaScript">
  9.  
  10.       function blokuj_klawisze(e) {
  11. 	      e = e || event;
  12.          var key = window.event ? e.keyCode : e.which;
  13.          var keychar = String.fromCharCode(key);
  14.          reg = /\d|\r|\W/;
  15.          return reg.test(keychar);
  16.       }
  17.    </script>
  18.    <input id=litera01 type=button onclick=d(this.value); value=&#1072;>
  19.  
  20.    <input id=litera02 type=button onclick=d(this.value); value=&#1073;>
  21.  
  22.    <input id=litera03 type=button onclick=d(this.value); value=&#1074;>
  23.  
  24.    <input id=litera04 type=button onclick=d(this.value); value=&#1075;>
  25.  
  26.    <input id=litera05 type=button onclick=d(this.value); value=&#1076;>
  27.  
  28.    <input id=litera06 type=button onclick=d(this.value); value=&#1077;>
  29.    <input id=litera07 type=button onclick=d(this.value); value=&#1105;>
  30.    <input id=litera08 type=button onclick=d(this.value); value=&#1078;>
  31.  
  32.    <input id=litera09 type=button onclick=d(this.value); value=&#1079;>
  33.  
  34.    <input id=litera10 type=button onclick=d(this.value); value=&#1080;>
  35.  
  36.    <input id=litera11 type=button onclick=d(this.value); value=&#1081;>
  37.  
  38.    <input id=litera12 type=button onclick=d(this.value); value=&#1082;>
  39.  
  40.    <input id=litera13 type=button onclick=d(this.value); value=&#1083;>
  41.  
  42.    <input id=litera14 type=button onclick=d(this.value); value=&#1084;>
  43.  
  44.    <input id=litera15 type=button onclick=d(this.value); value=&#1085;>
  45.  
  46.    <input id=litera16 type=button onclick=d(this.value); value=&#1086;>
  47.  
  48.    <input id=litera17 type=button onclick=d(this.value); value=&#1087;>
  49.  
  50.    <input id=litera18 type=button onclick=d(this.value); value=&#1088;>
  51.  
  52.    <input id=litera19 type=button onclick=d(this.value); value=&#1089;>
  53.  
  54.    <input id=litera20 type=button onclick=d(this.value); value=&#1090;>
  55.  
  56.    <input id=litera21 type=button onclick=d(this.value); value=&#1091;>
  57.  
  58.    <input id=litera22 type=button onclick=d(this.value); value=&#1092;>
  59.  
  60.    <input id=litera23 type=button onclick=d(this.value); value=&#1093;>
  61.  
  62.    <input id=litera24 type=button onclick=d(this.value); value=&#1094;>
  63.  
  64.    <input id=litera25 type=button onclick=d(this.value); value=&#1095;>
  65.  
  66.    <input id=litera26 type=button onclick=d(this.value); value=&#1096;>
  67.  
  68.    <input id=litera27 type=button onclick=d(this.value); value=&#1097;>
  69.  
  70.    <input id=litera28 type=button onclick=d(this.value); value=&#1098;>
  71.  
  72.    <input id=litera29 type=button onclick=d(this.value); value=&#1099;>
  73.  
  74.    <input id=litera30 type=button onclick=d(this.value); value=&#1100;>
  75.  
  76.    <input id=litera31 type=button onclick=d(this.value); value=&#1101;>
  77.  
  78.    <input id=litera32 type=button onclick=d(this.value); value=&#1102;>
  79.  
  80.    <input id=litera33 type=button onclick=d(this.value); value=&#1103;>
  81.  
  82.    <form action="" method="get">
  83.  
  84.       <input id=txt type="text" name="wyszukiwarka" onkeypress='return blokuj_klawisze(event)'/>
  85.  
  86.       <input type="submit" name="oursubmit" value="Szukaj" />
  87.  
  88.    </form>
  89.    <script language="JavaScript">
  90.  
  91.       function d(x){
  92.          document.getElementById("txt").focus();
  93.  
  94.          poczatek=document.getElementById("txt").selectionStart; koniec=document.getElementById("txt").selectionEnd;
  95.  
  96.          przedzaznaczonym=document.getElementById("txt").value.substring(0,poczatek);
  97.  
  98.          zaznaczone=document.getElementById("txt").value.substring(poczatek,koniec);
  99.  
  100.          pozaznaczonym=document.getElementById("txt").value.substring(koniec,document.getElementById("txt").value.length);
  101.  
  102.          document.getElementById("txt").value=przedzaznaczonym+x+pozaznaczonym;
  103.  
  104.       }
  105.  
  106.    </script>
  107. </body>
  108.  
  109. </html>
  110.  
[HTML] pobierz, plaintext


funkcja jest odpowiedzialna za wstawianie wybranych znaków, przypisanych do konkretnych przycisków, w pole tekstowe. Jednak gdy popełnię błąd i chcę uzupełnić słowo o brakujące litery, to w miejscu, w którym chcę go wstawić ustawiam kursor uzupełniam o jeden znak, a gdy brakuje dwóch liter muszę ponownie ustawiać kursor w odpowiednim miejscu, ponieważ automatycznie powędrował już na koniec linii. Jak go zmusić by po wpisaniu znaku kursor znajdował się za tym nowo wprowadzonym znakiem, a swoje położenie zmieniał dopiero gdy go przestawię?
werdan
27.11.2013, 13:35:00
Tu masz przykład o pozycji kursora, mozesz sobie podejrzec kod.

http://javascript.nwbox.com/cursor_position/

Wydaje mi się ze musisz trzymac gdzies pozycje przed dodaniem znaku i zakodowac sobie taka funkcje.
wujekk13
28.11.2013, 07:40:19
znalazłem w sieci rozwiązanie (nie pamiętam strony), dla funkcji d(x):

[HTML] pobierz, plaintext 
  1. function d(x){
  2. var start=document.getElementById("txt").selectionStart;
  3. var end=document.getElementById("txt").selectionEnd;
  4. document.getElementById("txt").value=document.getElementById("txt").value.substring(0, start)+x+document.getElementById("txt").value.substr(end); // dodajemy tekst w miejscu kursora
  5. document.getElementById("txt").selectionStart=document.getElementById("txt").selectionEnd=start+x.length; // ustawiamy kursor w odpowiednim miejscu      	
  6.       }
[HTML] pobierz, plaintext

wszystko działa tak jak chciałem
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.