Блог

Главная - Вопросы по программированию - Текстовая область заменяет значение scrollHeight в Firefox

Текстовая область заменяет значение scrollHeight в Firefox

#javascript #jquery #firefox #textarea

#javascript #jquery #firefox #текстовое поле

Вопрос:

Я внедряю вставку тега в textarea. Все работает отлично.

Но.
В Firefox, если высота текста больше текстовой области, при появлении полосы прокрутки. После замены тега он переходит к началу текстовой области. Все остальные браузеры остаются там, где произошла замена.
Возможно ли это сделать в Firefox?

IE имеет свою собственную реализацию. Firefox, Opera и Chrome используют

 var len = textarea[0].value.length
var start = textarea[0].selectionStart;
var end = textarea[0].selectionEnd;
var sel = textarea[0].value.substring(start, end);
var replace = chooseTags(sel, tag) // returns "[tag]sel[/tag]"
textarea[0].value = textarea[0].value.substring(0,start)   replace   textarea[0].value.substring(end,len);

А Opera и Chrome не меняют высоту прокрутки. Но Firefox аннулирует его. Как я могу предотвратить это?

(textarea[0] используется, потому что у Opera проблема с удалением textarea.val())

Комментарии:

1. Не могли бы вы, пожалуйста, создать тестовый пример на jsFiddle , который воспроизводит это поведение?

2. вот оно jsfiddle.net/49vsr/4 . Chrome остается, FF переходит.

Ответ №1:

Похоже, это ошибка в Firefox. Вы можете обойти это, сохранив текущее scrollTop значение textarea и восстановив его после добавления тега:

 var scTop = textarea[0].scrollTop,
    len = textarea[0].value.length,
    start = textarea[0].selectionStart,
    end = textarea[0].selectionEnd,
    sel = textarea[0].value.substring(start, end),
    replace = chooseTags(sel, tag); // returns "[tag]sel[/tag]"

// Add tag
textarea[0].value = textarea[0].value.substring(0,start) 
                    replace 
                    textarea[0].value.substring(end,len);
// Restore scrollTop
textarea[0].scrollTop = scTop;

Ответ №2:

Вы должны добавить следующее перед return предложением:

 textarea[0].setSelectionRange( end   7, end   7 ); 
// 7 is the total length of the text tags that have been added
textarea[0].focus();

У меня это сработало в модифицированной версии вашего jsfiddle: http://jsfiddle.net/carlesandres/WTQMa/1 /

Это то, что вам было нужно?