Internet Explorer 10, auto resize textarea

Question

Это может показаться вопросом, на который уже ответили тысячи раз, но решения, которые я нашел, не работали в Internet Explorer 10 или на Windows-телефоне 8 (что для меня важнее).

Моя общая проблема следующая: я пишу приложение Windows-Phone-8, C#, в котором пользователь должен редактировать значительно больший объем текста. Поскольку каждый UIElement ограничен 2048 пикселем, я не могу использовать TextBox. Итак, я хотел, чтобы пользователь редактировал текст в textarea в элементе управления Webbrowser. С этой целью текстовое поле должно изменяться в соответствии с введенным/удаленным текстом.

Я попробовал каждый ответ в этих нитей:

• Creating a textarea with auto-resize
• Autosizing textarea using Prototype

, но я не получил его на работу в Internet Explorer 10.

Я был бы признателен любой полностью рабочий html, поскольку я никогда раньше не использовал html и JavaScript, или другое решение, позволяющее пользователю редактировать много текста.

Answer 1

Я не уверен, что это сработает для вас, но дайте jQuery Autosize попытку: http://www.jacklmoore.com/autosize/ (.) Я не уверен, что вы можете использовать это в своем приложении, но я использовал его раньше в своем собственном проектов и найти, что он работает очень хорошо.

Answer 2

Суперлегкий вес:

Кто-нибудь считает это приемлемым? Не нужно возиться с прокруткой, и единственный JS, который мне нравится в этом, - это если вы планируете сохранять данные на blur ... и, по-видимому, совместимы со всеми популярными браузерами: 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>