Firefox中的Textarea替换值scrollHeight答案

【问题标题】：Textarea replace value scrollHeight in FirefoxFirefox中的Textarea替换值scrollHeight
【发布时间】：2011-05-06 07:19:37
【问题描述】：

我正在 textarea 中实现标签插入。一切都很好。

但是。
在 Firefox 中，如果文本高度大于 textarea，当滚动条出现时。标签替换后，跳转到文本区域的乞求。所有其他浏览器都保留在发生替换的位置。
可以在 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()的\r删除有问题)

【问题讨论】：

您能否在jsFiddle 上创建一个重现此行为的测试用例？
这里是jsfiddle.net/49vsr/4。 Chrome 停留，FF 跳跃。

标签： javascript jquery firefox textarea

【解决方案1】：

这似乎是 Firefox 中的一个错误。您可以通过保存textarea 的当前scrollTop 值并在添加标签后恢复它来解决它：

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/

这是你需要的吗？

【讨论】：