Вставка tab в textarea

TRIAL

Сообщения: 988 Репутация: N Группа: Джедаи
30 августа 2012 г. 17:14, спустя 4 минуты 26 секунд
Захотелось вдруг чтоб в <textarea> при наборе текста работала табуляция как в любом редакторе. Вроде задачка не сложная, но что-то у меня какой-то затык происходит.
Вот сам код:
$(function() { $(".css_textarea") .keydown(function(event) { if(event.which == 9) { $(this).append(" "); return false; } else return true; }); });

После загрузки страницы и тыкании в табуляцию всё отлично работает, символы пробела вставляются, но стоит начать вбивать другие символы, как символ табуляции перестает вставляться, при этом если воткнуть тот же alert(), он показывает что событие при нажатии таб всё еще работает но append() не срабатывает. И не важно символ там табуляции или любой другой символ.
Подскажите как добиться желаемого и по возможности еще доработать скрипт чтоб он вставлял табуляцию в то место, где щас находится курсор (каретка).
from TRIAL with LOVE
artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

30 августа 2012 г. 16:39, спустя 23 часа 25 минут 13 секунд

ну выглядит так, как будто this уже указывает на другой элемент

ιιlllιlllι унц-унц
Josh

Сообщения: 2008 Репутация: N Группа: Кто попало

30 августа 2012 г. 17:09, спустя 30 минут 21 секунду

Отлавливай позицию курсора в элементе и переопределяй val(). А аппенд тут при чём? Это же добавление в конец. Он изначально не должен работать так как ты хочешь
TRIAL

Сообщения: 988 Репутация: N Группа: Джедаи
30 августа 2012 г. 17:43, спустя 34 минуты 7 секунд
Переписал таким вот образом:
if(event.which == 9) { var text = $(this).val(); $(this).val(text + " "); return false; }

Заработало.
Теперь придется идти разбираться как вставлять текст в то место в котором щас каретка находится. Там что-то жутко навороченное понаписать нужно )))
from TRIAL with LOVE

TRIAL

Сообщения: 988 Репутация: N Группа: Джедаи

30 августа 2012 г. 18:31, спустя 48 минут

Пока нашел такое вот решение:

$(function() {
	$(".css_textarea")
		.keydown(function(event) {
		
			if(event.which == 9) {
				
				var obj = $("#css_textarea");
				
				if(document.selection) {		// Для IE
				    var s = document.selection.createRange();
				    if (s.text) {
				        s.text = s.text + "	";
				    }  
				} else {						// Opera, FireFox, Chrome
					
				    var start = obj[0].selectionStart;
				    var len = obj.val().length;
				    
				    obj.val(obj.val().substring(0, start) + "	" + obj.val().substring(start, len));
				}
				    
				return false;

			}
			else return true;
			
		});
});

Под ИЕ пока не тестил, в Опере и ФФ пашет. Завтра буду тестить дальше.
Спасибо всем за поддержку )))

from TRIAL with LOVE

TRIAL

Сообщения: 988 Репутация: N Группа: Джедаи

31 августа 2012 г. 13:33, спустя 19 часов 1 минуту 58 секунд

Финальная версия, которая работает во всех браузерах.

$(function() {
	$(".css_textarea")
		.keydown(function(event) {
		
			if(event.which == 9) {
				
				var obj = document.getElementsByName("css").item(0);
				
				// Opera, FireFox, Chrome
				if((obj.selectionStart) || (obj.selectionStart == "0")) {
					
					var start = obj.selectionStart;
					var end = obj.selectionEnd;
					
					obj.value=obj.value.substring(0,start) + "	" + obj.value.substring(end,obj.value.length);
					
					obj.focus();
					obj.setSelectionRange(Number(end+1), Number(end+1));
				}
				
				// Для IE
				if (document.selection) {
					
					obj.focus();
					sel = document.selection.createRange();
					sel.text = "	";
				}
 
				return false;

			}
			else return true;
			
		});
});

from TRIAL with LOVE

TRIAL

Сообщения: 988 Репутация: N Группа: Джедаи

31 августа 2012 г. 17:27, спустя 3 часа 53 минуты 14 секунд

Для всего этого у меня tinyMCE есть :)
А тут просто решил в движок свой встроить CSS редактор и чтоб в нем всё красиво можно было прописывать как в блокноте например :) В итоге сделал и успокоился. Сижу думаю чего еще такого модно к движку прикрутить )

from TRIAL with LOVE

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

Вставка tab в textarea

Войти