Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Automatyczne przechodzenie do input oraz submit pod enterem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Mephis
17.02.2013, 02:33:06
Witam.

Tworzę mały skrypcik czatu. Potrzebuję kodu, który po wyświetleniu strony automatycznie przeniesie do pola "input" gdzie będize można od razu pisać, oraz, żeby po wciśnięciu "enter" wykonywała się akcja pod przyciskiem submit.
s1518
17.02.2013, 06:32:46
forum.php.pl/index.php?showtopic=196015
co do wysylania enterem to zdarzenie onkeyup, kod dla klawisza enter ma wartość 13.
wszerad
17.02.2013, 10:16:39
Jeżeli chodzi o zaznaczenie elementu to szukaj pod: "focus" a enter chyba działa automatycznie jeżeli jest input jest typu submit a wszystko jest obję formem.
Mephis
19.02.2013, 00:39:34
Faktycznie, enter działa automatycznie.

Niby wszystko działa pięknie, ale nie do końca...
Opiszę to w ten sposób: czat jest umieszczony w pewnym okienku na dole strony. Jest podzielony na 2 iframe - pierwszy z formularzem, drugi do dynamicznego wyświetlania zawartości. Używając funkcji focus() na każdej stronie pasek przenosi mnie do widoczności tego elementu (czyli zwyczajnie pasek zjeżdza na sam dół) - i jest to bardzo niewygodne..

Oczwiście biorąc pod uwagę wygodę "czatowania" to jest całkiem wporzątku, gdyż pod tym względem osiągnąłem zamierzany cel (czyli po każdej "wypowiedzi" spowrotem nanosi na pole input, co jest wygodne, bo nei trzeba klikać na nie).

I w tym momencie nie mam pomysłu na wykonanie tego..

A może da się zrboić w jakiś sposób tak, aby po załadowaniu strony przeprowadziło do tego inputa, ale w taki sposób, aby ekran się nie poruszył?
Jest jesczcze jedno roziązanie, zapewne lepsze, ale nie umiem go zastosować. Mianowicie formularz bez przeładowania strony (ajax), gdzie do okienka z powrtotem przenosi po kliknieciu w submit. Nie umiem zastosować ze względu na to, że normalnie w warunku isset POST mam coś takiego:
Kod
if(isset($_POST['add_entry'])){
    require('class_news.php');
    $news = new news();
    $in = array(
        'autor'=>"'".$news->clean($_POST['autor'])."'",
        'tresc'=>"'".$news->clean($_POST['tresc'])."'"
    );
    $news->add_news($in);
} ?>

A nie wiem za bardzo nawet, jak powiazac kod php w środku skryptu ajax tongue.gif
PaFaT
21.02.2013, 09:02:09
Drogi Mephis,

jeśli chodzi o przewijanie strony, możesz spróbować umieścić czat w sposób stały:

[CSS] pobierz, plaintext 
  1. position: fixed;
[CSS] pobierz, plaintext


jeśli czat zajmuje mało miejsca.

Możesz również po uaktywnieniu pola czatu wywołać funkcję:

[HTML] pobierz, plaintext 
  1. <input type="text" ... onfocus="window.scrollTo(0, 0); " />
[HTML] pobierz, plaintext
Mephis
24.02.2013, 12:43:52
Ja się poddaję. Od długiego czasu głowie się nad tym, ale wciąż bez efektu.

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 	<link rel='stylesheet' type='text/css' href='czat.css' />
  7.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
  8.     <script src="http://malsup.github.com/jquery.form.js"></script>
  9. </head>
  10.  
  11. <body>
  12.  
  13. <script type="text/javascript">
  14. 	jQuery(function ($) { // czekamy na załadowanie DOM
  15.  
  16. 		$("form") // znajdujemy formularz
  17. 			.submit(function (event) { // rejestrujemy funkcję reagującą na zdarzenie wysłania formularza
  18. 				var $form = $(this); // referencja do formularza, który jest wysyłany
  19. 				event.preventDefault(); // nie pozwalamy przeglądarce przesłać formularza, bo sami to zrobimy ajaxem
  20.  
  21. 				$.ajax({ // wysyłamy ajaxem
  22. 					type: $form.attr("method"), // metodą jaką ma zdefiniowany formularz
  23. 					url: $form.attr("action"), // tam gdzie wskazuje atrybut action
  24. 					data: $form.serialize() // serializujemy formularz i ustawiamy to jako dane do wysłania ajaxem
  25. 				});
  26. 			});
  27.  
  28. 			.keypress(function (event) {
  29. 				if(event.which == 13) {
  30. 					$(this).blur();
  31. 					$('#submit').focus().click();
  32. 				}
  33. 			});
  34.  
  35. 	});
  36. </script>
  37.  
  38. <div>
  39. <center>
  40. 	<form id="form" method="post" action="dodaj.php" >  
  41. 		<input type="hidden" name="autor" value="autor" />  
  42. 		<textarea class="input" type="text" name="tresc" style="height: 17px;" value=""/></textarea>  
  43. 		<input class="przycisk" type="submit" name="add_entry" value="Wyślij" />  
  44. 	</form>
  45. </center>
  46.  
  47. </div>
  48. </body>
  49. </html>
  50.  
[PHP] pobierz, plaintext


Cóż, użyłem ajaxa do dynamicznego wysyłania danych...
Po napisaniu czegoś i kliknięciu submit, zostaje wcześniej wpisany tekst, co uniemożliwia wygodne korzystanie z "czatu".
Szukałem długo rozwiązań na to, aby po wysłaniu kasował się 'value' textarey, albo ogólnie resetował formularz, ale bez skutku.
Do tego jak widać, próbowałem... nieudowlnie próbowałem zrobić jeszcze tak, aby formularz wysyłał się po kliknięciu ENTER (działa przy inpucie, ale musiałem z niego zrezygnować, gdyż przy nim zapamiętywane są wpisywane do formularza znaki, a to tez mao wygodne gd sie ciągle pisze) - bez skutku...
Mógłby ktoś mnie precyzyjnie naprowadzić? - kasowanie wartości textarea i submit pod enterem...
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.