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

Question

虽然这个问题看起来好像已经被回答了一千次，但是我找到的解决方案在Internet Explorer 10和Windows-phone 8上都不起作用（对我来说更重要）。

我的总体问题如下：我正在编写一个Windows-Phone-8、C#应用程序，用户应该编辑大量文本。由于每个UIElement限制为2048像素，所以我不能使用TextBox。因此，我想让用户在Webbrowser控件中的中编辑文本。为此，<textarea>必须随着输入/删除的文本而调整大小。</br><div class="h-2"></div>我尝试了这些线程中的每个答案： <ul> <li><a href="https://dev59.com/l3RB5IYBdhLWcg3w9b19">Creating a textarea with auto-resize</a></li> <li><a href="https://dev59.com/C3VD5IYBdhLWcg3wWaRh">Autosizing textarea using Prototype</a></li> </ul> 但是在Internet Explorer 10中我没有让它工作。</br><div class="h-2"></div>如果有任何完全可行的HTML，因为我从未使用过HTML和JavaScript，或者其他让用户编辑大量文本的解决方案，我将不胜感激。

- Rico-E

Answer 1

超级轻量级：

有没有人考虑过contenteditable？不需要烦恼滚动，唯一我喜欢的JS是如果你计划在模糊时保存数据...而且显然它在所有流行的浏览器上都兼容：http://caniuse.com/#feat=contenteditable

只需将其样式设置为文本框，并自动调整大小...将其最小高度和行高设置为首选文本高度并开始使用。

这种方法的酷之处在于您可以在某些浏览器上保存<br>和<p>标签。

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>

- Webmaster G

---

我发现，如果你在克隆文本区域（例如，在一个具有始终可用的“下一个”字段的动态表单中）中使用autosize，它会变得很糊乱（技术术语意味着“一个人期望从Internet Explorer中进行的操作”).CONTENTEDITABLE虽然很好用，但它有自己的问题：例如，使用div（如上面的示例），它会生成HTML，例如为新行生成<br>并将每行包装在嵌套的div中。你不能在表单中使用它，因为（我猜）它不被认为是输入字段（而且你仍然有所有嵌套的HTML）。 - Cuse70

Answer 2

我不确定这对你是否有用，但可以试试 jQuery Autosize：http://www.jacklmoore.com/autosize/ (.) 我不确定你是否能在你的应用程序中使用它，但我之前在自己的项目中使用过它，并发现它运行得相当不错。

- Jon Gallup