ФорумПрограммированиеJavaScript → Вставка tab в textarea

Вставка tab в textarea

  • TRIAL

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

    Spritz 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 Группа: в ухо

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

    ну выглядит так, как будто this уже указывает на другой элемент
    ιιlllιlllι унц-унц
  • Josh

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

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

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

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

    Spritz 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 Группа: Джедаи

    Spritz 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 Группа: Джедаи

    Spritz 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 Группа: Джедаи

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

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

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