[JS] Edytor tekstu - problem z IE 7.0

Witam,
Mam edytor tekstu na stronie, po prostu dodaje on znaczniki przed i po zaznaczonym tekście.
Jednak nie działa on prawidłowo na IE 7.0. Jakoś dziwnie powiela tekst niż dodaje znaczniki.
W IE 6.0, FF i Operze działa prawidłowo.

Kod odpowiadający za dodawanie znaczników:

function dodajZnacznik (markOp, markCl)
	{
		var textarea = document.getElementById('tresc');
		
		var selLength = textarea.textLength;
		var selStart = textarea.selectionStart;
		var selEnd = textarea.selectionEnd;
		
		var selBefore = (textarea.value).substring(0, selStart);
		var selection = (textarea.value).substring(selStart, selEnd);
		var selAfter = (textarea.value).substring(selEnd, selLength);
		
		textarea.value = selBefore + markOp + selection + markCl + selAfter;
	}

Przykład można przetestować tutaj:
Prosta rejestracja: http://www.tdragon.ovh.org/rique/index.php?section=register
Później logowanie w panelu wyżej obok brzydkiego logo.
Następnie kliknij "Dodaj poradnik" w lewym panelu.
Wtedy ukaże sie edytor tekstu.

Aha... to jest strona testowa. Co znaczy, że nie ma to dużo wspólnego z tym co chce osiągnąć.

IE jak zwykle ma z czymś problemy :-/
Zobacz rozwiązanie tu: http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript/

Sprawe rozwiązałem inaczej, skrypt oczywiście jeszcze nie jest dopracowany, ale dodaje ładnie znaczniki.

Dla mających problem:

var browser = navigator.userAgent.toLowerCase();  
var is_ie = (browser.indexOf("msie") != -1);

var element = document.getElementById('ID_TWOJEGO_TEXTAREA');

function dodajZnacznik (markOp, markCl)
{
                if (is_ie)
		{
			element.focus();
			var selection = document.selection;
			var range = selection.createRange();
			range.colapse;
		
			var full = markOp + range.text + markCl;
			range.text = full;
		}
		else
		{
			var selLength = element.value.length;
			var selStart = element.selectionStart;
			var selEnd = element.selectionEnd;
		
			var selBefore = (element.value).substring(0, selStart);
			var selection = (element.value).substring(selStart, selEnd);
			var selAfter = (element.value).substring(selEnd, selLength);
		
			element.value = selBefore + markOp + selection + markCl + selAfter;
		}
}

Teraz mam inny problem

Mianowicie moja funkcja sprawdza czy pola formularza są wypełnione.
Mniejwięcej tak:

function ValidForm (form)
	{
		if (form.kategoria.value == "Wybierz kategorie")
		{
			alert ("Nie wybrałeś kategorii !");
			return false;
		}
		
		if (form.tytul.value == "")
		{
			alert ("Musisz podać tytuł poradnika.");
			return false;
		}
             }

form to formularz w którym sprawdzam pola, następnie tytul i kategoria to jakieś tam inputy.
Porównuje czy ich wartość jest równa tyle co string mający 0 znaków.

Niestety w IE nie działa dla 'kategoria'. Czym jest 'kategoria'?

Jest to:

<select id='kategoria' name='kategoria'><option>Wybierz kategorie</option></select>

W Operze bezproblemu .value wyciąga w tej chwili wybrany option.
Natomiast w IE zamiast 'Wybierz kategorie', otrzymuje undefined.

Natomiast w IE zamiast 'Wybierz kategorie', otrzymuje undefined

Więc sprawdzaj czy to pole jest równe undefined ;)
if (form.kategoria.value == "Wybierz kategorie" || form.kategoria.value == undefined) {...}

może odwołuj się do tych pól po id?

@guest123 w IE każde zaznaczone pole zwraca undefined niezależnie czy jest to 'Wybierz Kategorie' czy też nie

Próbowałem odwołać sie po id, czyli:

var element = document.getElementById('kategoria');

		if (element.options.value == "Wybierz kategorie")
		{
			alert ("Nie wybrałeś kategorii !");
			return false;
		}

Niestety nadal na IE nie działa.

value to nie jest wyświetlany tekst a value. Wyświetlany tekst masz w innerHTML.

No w sumie masz racje, tylko po co w takim razie przeglądarki takie jak Opera, poprawnie interpretują value jako nie value, a wartość pomiędzy optionami czyli innerHTML?

Czy ty też masz takie problemy z przeglądarkami jak ja?
Wnioskuje, że już wyrosłeś z tego typu problemów ;).

Jakbyś miał normalnie ustalone value dla każdego elementu to i opera by podawała poprawne wartości.

No ok, ale innerHTML zwraca mi wszystko co było pomiędzy

<select id='kategoria' name='kategoria'></select>

Natomiast:

form.kategoria.defaultSelected
form.kategoria.selected
form.kategoria.text

Zwracają undefined pomimo zastosowania dla Wybierz kategorie selected = 'selected'

na razie widze tylko jedno rozwiązanie, otóż w innerHTML otrzymywałem przy wybranej kategorii coś takiego:

<option selected>Wybierz Kategorie</option>

Jeżeli wybraną kategorią jest Wybierz Kategorie oczywiście.

Można by po prostu eregami wybrać wartość pomiędzy optionami, na podstawie selected.
Jednak czy to nie jest aby zbyt karkołomne do tak prostego zadania?

PS. W Operze działa jak należy, tylko IE robi problemy.

Zaznaczony element <option> możesz pobrać w JS jeszcze w ten sposób. Działa także na IE.

select.options[select.selectedIndex];
// zmienna select to element <select>

Poniższy skrypt nie działa w ogóle, ja nie dostaje wiadomości o undefined, po prostu sypie sie wszystko.

var element = document.getElementById('kategoria');
if (element.options[select.selectedIndex] == "Wybierz kategorie")
{
  alert ("Nie wybrałeś kategorii !");
  return false;
}

kategoria to mój select.

<select id='kategoria' name='kategoria'><option>Wybierz kategorie</option></select>

Szukałem na ten temat i niby właśnie tak sie wyciąga option-a, ale już zgupiałem.

Jakieś sugestie?

Czytasz, ale nie rozumiesz ;-P
Powinno być tak:

var element = document.getElementById('kategoria');
if (element.options[element.selectedIndex].value == "Wybierz kategorie")
{
  alert ("Nie wybrałeś kategorii !");
  return false;
}

Ponieważ element.options[element.selectedIndex] zwróci konkretny element <option>, który ma swoje metody, właściwości, etc.
Jedną z nich jest value, czyli atrybut value. To co się znajduje między <option> i </option> wyciągasz za pomocą właściwości innerHTML.

Faktycznie teraz działa. Dzięki wielkie za pomoc.

EDIT:
Aha i czemu siedzisz na guest123? Zamiast na pełnoprawnym koncie? ;P