Unusual shift in behavior - <input> on Windows 8.1

Question

Unusual shift in behavior - <input> on Windows 8.1

Our application is a unique HTML5/WinJS Google Talk app tailored for Windows 8 users. Within our app, we utilize a textarea for chat input with a predefined maximum height. We have coded the height to automatically adjust to the maximum limit once reached.

However, we encountered an issue when testing the app on Windows 8.1. Every time the oninput is triggered, the height increases by 3 pixels with each character typed. This causes the textarea to expand continuously, even for short inputs that do not require a new line. It seems that the scrollHeight or height properties are not updating correctly in Windows 8.1.

<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)

This function is linked to the oninput event, where we check if the client height exceeds 350 pixels and adjust the overflow property accordingly.

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

To address the discrepancy in height, we added " - 5" to adjust the scrollHeight value by 5 pixels. This was a temporary workaround that we implemented. However, in Windows 8.1, clearing the text field (Ctrl-A then Backspace) does not reset the textarea height as it did in Windows 8.

We are seeking alternative approaches to handle this JavaScript-related issue more efficiently. Your suggestions and insights are highly appreciated!

Feel free to ask if you require more details or information!

javascript html css windows-8 windows-8.1

Answer 1

Answer №1

It has come to my attention that JavaScript in Windows 8 often leads to conflicts with CSS. As I work on developing an app, I find myself spending a significant amount of time fixing visual errors that arise due to conflicting CSS or global variables. Do you encounter issues with using multiple CSS files and declaring similar names across them? For example, having .inputField declared in file1.css and then again in file2.css with different attributes?

Answer 2

It has come to my attention that JavaScript in Windows 8 often leads to conflicts with CSS. As I work on developing an app, I find myself spending a significant amount of time fixing visual errors that arise due to conflicting CSS or global variables. Do you encounter issues with using multiple CSS files and declaring similar names across them? For example, having .inputField declared in file1.css and then again in file2.css with different attributes?

Answer 3

Answer №2

In conducting some tests independently, I found that I lacked access to Win8.1 and only had Win8 at my disposal.

Upon testing in Chrome and IE10 on Win8, I encountered some strange behaviors! However, after adjusting

e.target.style.height = (e.target.scrollHeight - 18) + "px";

closer to the font-size, the performance improved.

Currently, the code seems to be functioning properly in Chrome, Firefox, and IE10 (Win8).

Here is a link to jsfiddle for everyone to review: http://jsfiddle.net/GREM9/7/

Feel free to test it out in Win8.1 and see if it meets your needs.

Answer 4

In conducting some tests independently, I found that I lacked access to Win8.1 and only had Win8 at my disposal.

Upon testing in Chrome and IE10 on Win8, I encountered some strange behaviors! However, after adjusting

e.target.style.height = (e.target.scrollHeight - 18) + "px";

closer to the font-size, the performance improved.

Currently, the code seems to be functioning properly in Chrome, Firefox, and IE10 (Win8).

Here is a link to jsfiddle for everyone to review: http://jsfiddle.net/GREM9/7/

Feel free to test it out in Win8.1 and see if it meets your needs.

Answer 5

Answer №3

I enhanced Windkiller's fiddle.

A debugger div was added to showcase the utilization of a selected element's data property for data storage and retrieval without impacting the DOM.

If the length of the last character is greater than the current character length in the 'input' event, the height is set to the initial height and then adjusted to the value of scrollHeight.

The usage of the 'em' unit was implemented in this example.

Furthermore, a line-height was declared in the CSS styling along with the specific declaration of 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/

Answer 6

I enhanced Windkiller's fiddle.

A debugger div was added to showcase the utilization of a selected element's data property for data storage and retrieval without impacting the DOM.

If the length of the last character is greater than the current character length in the 'input' event, the height is set to the initial height and then adjusted to the value of scrollHeight.

The usage of the 'em' unit was implemented in this example.

Furthermore, a line-height was declared in the CSS styling along with the specific declaration of 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/

Answer 7

Answer №4

Why not create a new CSS class that handles overflow scrolling, rather than relying solely on Javascript?

You can use jQuery to monitor the height of a text area, adding the class that enables overflow scrolling once it reaches its maximum height.

By following this approach, the code becomes more intuitive and easier to comprehend at first glance.

For instance:

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

This method should effectively address your concern. Additionally, consider replacing the height attribute with min-height: 30px;

Answer 8

Why not create a new CSS class that handles overflow scrolling, rather than relying solely on Javascript?

You can use jQuery to monitor the height of a text area, adding the class that enables overflow scrolling once it reaches its maximum height.

By following this approach, the code becomes more intuitive and easier to comprehend at first glance.

For instance:

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

This method should effectively address your concern. Additionally, consider replacing the height attribute with min-height: 30px;

Unusual shift in behavior - <input> on Windows 8.1

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adjusting the size of the snap increments

Why is this component not functioning properly?

Having trouble extracting the video ID from a Youtube feed XML with jQuery

Cannot retrieve Global variables when using chrome.tabs.executescript in Chrome 55

The rotation transformation on the Z-axis occurs once the animation has finished

AngularJS implementation for a confirmation dialog with data

Scrolling container embedded within a parent with absolute positioning

Accessing a hyperlink in an alternative browser

Unable to trigger @click event on nuxt-link component within Nuxt 3

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

Utilizing React to pass parent state to a child component becomes more complex when the parent state is derived from external classes and is subsequently modified. In this scenario,

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Upon refreshing, the user of the React JS application is redirected to a different page

Is it possible to retrieve a physical address using PHP or Javascript?

Instructions for altering the hue of a canvas square when the cursor hovers over it

Why does NPM not install the most recent version of the package during an update?

How can React Native efficiently retrieve data from multiple APIs simultaneously?

Utilizing component state or props within Redux mapDispatchToProps operations

Transform audio file into a base64 encoding

Uninterrupted jQuery AJAX calls