3

It may seem like a question which is already answered a thousand times, but the solutions I found neither worked in Internet Explorer 10 nor on Windows-phone 8 (what is more important to me).

My General Problem is the folllowing: I'm writing a Windows-Phone-8, C# app, in which the user should edit a considerably large amount of text. Since each UIElement is limited to 2048 Pixel, I can't use TextBox. So I wanted to let the user edit the text in a textarea in a Webbrowser control. For that purpose, the textarea has to resize with the text entered/deleted.

I tried every answer in these threads:

but i didn't get it to work in Internet Explorer 10.

I would appreciate any fully working html, as I never used html and JavaScript before, or another solution to let the user edit lots of text.

Community
  • 1
  • 1
Rico-E
  • 1,806
  • 2
  • 28
  • 47

2 Answers2

0

I'm not sure if this will work for you, but give jQuery Autosize a try: http://www.jacklmoore.com/autosize/ (.) I'm not sure if you can use this in your application, but I have used it before in my own projects and find that it works pretty well.

Jon Gallup
  • 317
  • 3
  • 11
0

Super light weight:

Has anyone considered contenteditable? No messing around with scrolling, and the only JS I like about it is if you plan on saving the data on blur... and apparently, it's compatible on all of the popular browsers : http://caniuse.com/#feat=contenteditable

Just style it to look like a text box, and it autosizes... Make its min-height and line-height the preferred text height and have at it.

What's cool about this approach is that you can save and tags on some of the browsers.

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
  • 502
  • 5
  • 12
  • 2
    I've found that autosize goes whacko (technical term meaning 'an operation one would expect from Internet Explorer') if you're cloning textareas (e.g., in a dynamic form with an always available 'next' field). CONTENTEDITABLE, as nifty as it is, has it's own set of issues: e.g., use a div (as in the example above, and it generates html, such as
    for new lines and wraps each line in a nested div. You can't use it in a form because (I'm guessing) it's not recognized as an input field (and you still have all the nested html).     – Cuse70 Jan 07 '15 at 22:08