Internet Explorer 10,自动调整textarea大小

时间:2013-05-21 14:54:12

标签: html windows-phone-8 textarea

这似乎已经回答了一千次问题,但我发现的解决方案既没有在Internet Explorer 10中工作,也没有在Windows Phone 8上工作(对我来说更重要)。

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

我在这些帖子中尝试了每个答案:

但我没有在Internet Explorer 10中使用它。

我很感激任何完全正常工作的HTML,因为我以前从未使用过html和JavaScript,或者是另一种让用户编辑大量文本的解决方案。

2 个答案:

答案 0 :(得分:0)

我不确定这是否适合您,但是尝试jQuery Autosize:http://www.jacklmoore.com/autosize/(。)我不确定您是否可以在您的应用程序中使用它,但我之前使用过它在我自己的项目中,发现它运作良好。

答案 1 :(得分:0)

超轻量:

有没有人认为满足?没有乱七八糟的滚动,我喜欢它的唯一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>