CODEWITHSUNDEEP
javascripthtmlcsswindows-8windows-8.1
Jacob Morrison
Jacob Morrison

Reputation: 648

Odd change in behavior - <textarea> in Windows 8.1

Our application is a HTML5/WinJS Google Talk app for Windows 8. We have a textarea that we use for the chat input. We have a max height for it, and we programatically set the height to max out.

Normal height

Max height

So after it reaches that max, it sets overflowY to scroll. This has been working great. However when we tested our application on Windows 8.1, there's an issue with it. Whenever we type oninput, the height increases by 3px for every character typed. So as you type the box just keeps getting bigger, even if it's just 5 letters and doesn't require a new line. For some reason the scrollHeight or the height is not updating properly.

<textarea class="inputField" id="inputField" placeholder="Type your message"></textarea>

onMessageInput: function (e) {
        e.target.style.height = (e.target.scrollHeight - 5) + "px";
        if (e.target.clientHeight >= 350) {
            e.target.style.overflowY = "scroll";
        }
        else {
            e.target.style.overflowY = "hidden";
        }
  }.bind(this)

That is the function bound to the oninput. We say that if the client height is over 350px, then set it to scroll.

  .inputField {
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            font-size: 19px;
            height: 30px;
            min-height: 30px;
            max-height: 350px;
            overflow: hidden;
        }

We did " - 5" because for some reason the scrollHeight always seems to be bigger by 5px. It was our hacky solution for this. It seems to be 8px higher in 8.1. However(in 8.1) when we clear the text field(Ctrl-A then hitting Backspace), it doesn't reset the height of the textarea, but it did in Windows 8.

I think we are going about the JavaScript aspect the wrong way, and are completely open to suggestions.

Let me know if I can provide more information!

Upvotes: 2

Views: 753

Answers (4)

Brett Caswell
Brett Caswell

Reputation: 1504

I improved on Windkiller's fiddle.

I included a debugger div that demonstrates using a selected element's data property to store and retrieve data without effecting the DOM.

In the event (namely 'input') that the last character length is greater that the current character length the height is assigned the size of the initial height and then assigned the value of scrollHeight.

I also went with the 'em' unit in this sample.

Additionally, I added (declared) a line-height in the css styling, and specifically declared overflow-x.

HTML

<textarea class="inputField" style="height:2em;font-size: 19px;" id="inputField" placeholder="Type your message"></textarea>
<div id='debugger'>
    <div>0 current characters</div>
    <div>0 last characters</div>
</div>

jQuery 

$('#inputField').data('lastCharCount', 0);

$('#inputField').bind('input', function (e) {
    $(this).data('CharCount', e.target.value.length);

    $('#debugger').html('<div>' + $(this).data('CharCount') + ' current character(s)</div>');

    if (e.target.clientHeight >= 350 && e.target.style.overflowY != "scroll") {
        e.target.style.overflowY = "scroll";
    } else if (e.target.clientHeight < 350) {
        e.target.style.overflowY = "hidden";
    }
    if ($(this).data('CharCount') > $(this).data('lastCharCount')) {
        e.target.style.height = ((e.target.scrollHeight) / e.target.style.fontSize.replace('px', '')) + "em";
        /* A change in character length occurred */
    } else if ($(this).data('CharCount') < $(this).data('lastCharCount')) {
        e.target.style.height = '2em';
        e.target.style.height = ((e.target.scrollHeight + 1) / e.target.style.fontSize.replace('px', '')) + "em";
        /* A change in character length occurred */
    } else {
        /* No change in character length occurred. Possible character replaced */
    }
    $('#debugger').append('<div>' + $(this).data('lastCharCount') + ' last character(s)</div>');
    $(this).data('lastCharCount', $(this).data('CharCount'));

});

CSS

body {
    font-size:14px;
}
.inputField {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    min-height: 2em;
    max-height: 350px;
    overflow: hidden;
    overflow-x:hidden;
    padding:0em;
    line-height:1em;
}

jsFiddle: http://jsfiddle.net/GREM9/8/

Upvotes: 1

Entity Black
Entity Black

Reputation: 3491

I did few tests on my own. Unfortunately I dont have Win8.1, I have only Win8.

So I tested this in chrome and in IE10 on Win8 and everything acted really weird! Anyway, if I setted up e.target.style.height = (e.target.scrollHeight - 18) + "px"; closer to font-size, it started to act more resonable.

Now it is somehow working in chrome, firefox and IE10 (Win8).

Here is jsfiddle so all can check it out: http://jsfiddle.net/GREM9/7/

So you can check it out in Win8.1 and maybe it will be good for you enough to keep it.

Upvotes: 1

Liam Kenneth
Liam Kenneth

Reputation: 982

Instead of using your Javascript code, I would create a class that would add overflow scroll.

Then use jquery to check the height of the text area, when it gets to the max height add the class to make the textarea overflow scroll.

Code should be a lot easier to understand at 1st glance.

e.g 

if ($('textarea').height => 350) { $('textarea').addClass('overflowY');}

hopefully that solves your issue. Oh and remove height and change it to min-height:30px;

Upvotes: 0

Alexandre Domingos
Alexandre Domingos

Reputation: 11

I've noticed that javascript for Windows 8 can cause lots of conflicts between css. I'm developing an app where half the time I just try to fix visual errors caused by conflicting css or global vars. Are you using various css files and declaring similar names between them? (as in, imagine you have file1.css wiht .inputField declared in it, and in this page you have file2.css with.inputField declared with different atributes)

Upvotes: 1

Related Questions