Forum PHP.pl > [JavaScript]Zmiana koloru po wypełnieniu któregoś elementu z atrybutem contenteditable

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Zmiana koloru po wypełnieniu któregoś elementu z atrybutem contenteditable

Grandalf00

16.08.2016, 11:12:07

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.

Puszy

17.08.2016, 10:28:00

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 
<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<style>
		td{
			width: 150px;
			height: 150px;
			border: 1px solid #C3C3C3;
		}
		.currently-editing{
			background-color: #E0E8FF;
		}
 
		.edited{
			background-color: #F7E741;
		}
	</style>
</head>
<body>
 
<table>
	<tr>
		<td>
			<input type="text" data-edited="false" value="foo" />
		</td>
		<td>
			<input type="text" data-edited="false" />
		</td>
	</tr>
	<tr>
		<td>
			<input type="text" data-edited="false" />
		</td>
		<td>
			<input type="text" data-edited="false" value="bar" />
		</td>
	</tr>
</table>
 
<script>
	$(document).ready(function () {
 
		$('input').focus(function () {
			$(this).closest('td').addClass('currently-editing');
		}).blur(function () {
			$(this).closest('td').removeClass('currently-editing');
		}).change(function () {
			$(this).closest('td').addClass('edited');
			$(this).attr('data-edited', 'true');
		});
 
	});
</script>
 
</body>
</html>
 
[HTML] pobierz, plaintext

vokiel

17.08.2016, 12:53:30

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

Puszy

17.08.2016, 13:10:31

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.

trueblue

17.08.2016, 13:31:01

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.

Grandalf00

18.08.2016, 09:21:36

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.

trueblue

18.08.2016, 09:47:07

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

Grandalf00

18.08.2016, 10:21:47

Czytałem o tym

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.

trueblue

18.08.2016, 10:26:04

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

Grandalf00

18.08.2016, 10:50:33

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ąć

trueblue

18.08.2016, 10:58:53

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>.

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.