Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Zmiana koloru po wypełnieniu któregoś elementu z atrybutem contenteditable
Grandalf00
post 16.08.2016, 11:12:07
Post #1





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 23.01.2016

Ostrzeżenie: (0%)
-----

Witajcie! Mam na stronie tabelę gdzie zawartość można edytować. Każda komórka ma unikalny id. Chciałbym aby pole, które zostanie wedytowane (np onchange) zmieniło tło na wybrany. Myślałem zrobić to za pomocą skryptu, który będzie "nasłuchiwał" po załadowaniu się strony czy nie nastąpiło "onfocus". Tylko nie wiem czy dla przeglądarki samo kliknięcie w pole to już "onfocus" czy muszę mimo wszystko dopisać to zdarzenie w kodzie każdego pola?

Wolałbym posłużyć się już istniejącym id, które będzie przechwytywał skrypt w momencie edycji któregokolwiek pola.
Go to the top of the page
+Quote Post
Puszy
post 17.08.2016, 10:28:00
Post #2





Grupa: Zarejestrowani
Postów: 279
Pomógł: 42
Dołączył: 10.10.2011

Ostrzeżenie: (0%)
-----

Zakładam że tabela zaweira <input> w każdej komórce. Poniższy skrypt podświetla na niebiesko komórkę która jest obecnie edytowana i na żółto gdy została edytowana. Mam nadzieję że taki efekt chciałeś osiągnąć.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  5. 	<style>
  6. 		td{
  7. 			width: 150px;
  8. 			height: 150px;
  9. 			border: 1px solid #C3C3C3;
  10. 		}
  11. 		.currently-editing{
  12. 			background-color: #E0E8FF;
  13. 		}
  14.  
  15. 		.edited{
  16. 			background-color: #F7E741;
  17. 		}
  18. 	</style>
  19. </head>
  20. <body>
  21.  
  22. <table>
  23. 	<tr>
  24. 		<td>
  25. 			<input type="text" data-edited="false" value="foo" />
  26. 		</td>
  27. 		<td>
  28. 			<input type="text" data-edited="false" />
  29. 		</td>
  30. 	</tr>
  31. 	<tr>
  32. 		<td>
  33. 			<input type="text" data-edited="false" />
  34. 		</td>
  35. 		<td>
  36. 			<input type="text" data-edited="false" value="bar" />
  37. 		</td>
  38. 	</tr>
  39. </table>
  40.  
  41. <script>
  42. 	$(document).ready(function () {
  43.  
  44. 		$('input').focus(function () {
  45. 			$(this).closest('td').addClass('currently-editing');
  46. 		}).blur(function () {
  47. 			$(this).closest('td').removeClass('currently-editing');
  48. 		}).change(function () {
  49. 			$(this).closest('td').addClass('edited');
  50. 			$(this).attr('data-edited', 'true');
  51. 		});
  52.  
  53. 	});
  54. </script>
  55.  
  56. </body>
  57. </html>
  58.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
vokiel
post 17.08.2016, 12:53:30
Post #3





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

A samo https://developer.mozilla.org/en/docs/Web/CSS/:focus nie wystarczy?


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
Puszy
post 17.08.2016, 13:10:31
Post #4





Grupa: Zarejestrowani
Postów: 279
Pomógł: 42
Dołączył: 10.10.2011

Ostrzeżenie: (0%)
-----

Oczywiście że wizualnie wystarczy, skrypt który pokazałem umożliwia rozbudowanie go o nie tylko dodanie/usunięcie klasy. Dodatkowo flaguje input jako zmieniony dzięki atrybutowi data co umożliwi Grandalf00owi np. wyświtlenie pod tabelą listy edytowanych inputów.

edit: :focus zadziała na background inputa nie komórki, z tego co pamiętam nie jest jeszcze możliwe w prosty sposób odwołać się do parenta w CSSie.

Ten post edytował Puszy 17.08.2016, 13:13:43
Go to the top of the page
+Quote Post
trueblue
post 17.08.2016, 13:31:01
Post #5





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Ale autor raczej nie ma tam inputa. Jak w tytule - ma tabelę w elemencie edytowalnym, czyli edytuje wizualnie kod html, a dokładnie, bezpośrednio zawartość komórki.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Grandalf00
post 18.08.2016, 09:21:36
Post #6





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 23.01.2016

Ostrzeżenie: (0%)
-----

Dokładnie jak napisał @trueblue - w moim przypadku chodzi dokładnie o komórkę w tabeli. :focus zmieni mi tylko kolor aktywnej komórki, a mi chodzi o to aby po edycji i np klinięciu w inną komórkę czy gdziekolwiek, komórka wyedytowana miała na stałe (do czasu przeładowania strony) inni kolor tła dla wiadomości użytkownika, że coś było zmienione.

Aktualnie komórki dziedziczą style, ale każda ma indywidualny ID.

Ten post edytował Grandalf00 18.08.2016, 09:24:00
Go to the top of the page
+Quote Post
trueblue
post 18.08.2016, 09:47:07
Post #7





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Może coś z tego: http://stackoverflow.com/questions/8694054...contenteditable


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Grandalf00
post 18.08.2016, 10:21:47
Post #8





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 23.01.2016

Ostrzeżenie: (0%)
-----

Czytałem o tym smile.gif Nie wiem czemu, ale jakoś chce uniknąć dopisywania kolejnego zdarzenia do komórek - chociaż wtedy wiem jak to zrobić. Założyłem wątek, bo myślałem, że jest jakiś sposób na napisanie skryptu, który będzie "nasłuchiwał" i w przypadku zdarzenia np onChange na komórce, trwale zmieni kolor tła w bieżącym widoku.
Go to the top of the page
+Quote Post
trueblue
post 18.08.2016, 10:26:04
Post #9





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Nie rozumiem. Nie chcesz dopisywać kolejnych zdarzeń do komórek, ale chciałbyś nasłuchiwać zdarzenie onChange na komórce.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Grandalf00
post 18.08.2016, 10:50:33
Post #10





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 23.01.2016

Ostrzeżenie: (0%)
-----

Nie chce - w sensie w kodzie np <td onchange... Jeżeli da się wykorzystać akutalny ID komórki, to wolałbym takie rozwiązanie.

Jeżeli faktycznie się nie da inaczej niż przez dodatkowy kod onchange dla komórki, to temat można zamknąć smile.gif
Go to the top of the page
+Quote Post
trueblue
post 18.08.2016, 10:58:53
Post #11





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

W drugim poście (najwyżej punktowana odpowiedź) jest kod z wykorzystaniem DOMCharacterModified. Ze zdarzenia możesz wyciągnąć info czy nadrzędny tag dla węzła tekstowego to <td>.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 9.06.2025 - 06:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn