Internet Explorer 10，自动调整文本区域大小

Posted 2023-05-07

【中文标题】Internet Explorer 10，自动调整文本区域大小

【英文标题】：Internet Explorer 10, auto resize textarea

【发布时间】：2013-05-16 09:39:17

【问题描述】：

这似乎是一个已经被回答了一千次的问题，但我发现的解决方案既不适用于 Internet Explorer 10，也不适用于 Windows-phone 8（对我来说更重要的是）。

我的一般问题如下：我正在编写一个 Windows-Phone-8、C# 应用程序，用户应该在其中编辑大量文本。 由于每个 UIElement 限制为 2048 像素，我不能使用 TextBox。 所以我想让用户在 Webbrowser 控件中编辑 textarea 中的文本。 为此，textarea 必须根据输入/删除的文本调整大小。

我尝试了这些线程中的每个答案：

Creating a textarea with auto-resize Autosizing textarea using Prototype

但我没有让它在 Internet Explorer 10 中工作。

如果我以前从未使用过 html 和 javascript，我将不胜感激任何可以正常工作的 html，或者让用户编辑大量文本的其他解决方案。

【参考方案1】：

我不确定这是否适合你，但试试 jQuery Autosize：http://www.jacklmoore.com/autosize/ (.) 我不确定你是否可以在你的应用程序中使用它，但我之前在我的应用程序中使用过它自己的项目，发现效果很好。

【参考方案2】：

超轻量：

有没有人认为 contenteditable？滚动不会乱七八糟，我唯一喜欢它的 JS 是如果您打算将数据保存在模糊上……显然，它在所有流行的浏览器上都兼容：http://caniuse.com/#feat=contenteditable

只需将其设置为看起来像一个文本框，它会自动调整大小...使其最小高度和行高成为首选文本高度并拥有它。

这种方法的好处在于您可以在某些浏览器上保存和标记。

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight 
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;

</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) 
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
);

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>

【讨论】：

我发现如果您正在克隆文本区域（例如，以始终可用的“下一个' 场地）。 CONTENTEDITABLE，尽管它很漂亮，但有它自己的一组问题：例如，使用 div（如上面的示例，它会生成 html，例如 用于新行并将每一行包装在嵌套的 div 中。你不能在表单中使用它，因为（我猜）它未被识别为输入字段（并且您仍然拥有所有嵌套的 html）。