Div and textarea behave the same except in Firefox - what to do?

Question

I want to create a textarea which highlights the text beyond a character limit (like the twitter one).

My attempt is here: http://jsfiddle.net/X7d8H/1/

HTML

<div class="wrapper">
    <div class="highlighter" id="overflowText"></div>
    <textarea id="textarea1" maxlength="200"></textarea>
</div>
<div id="counter">Letters remaining: 140</div>
<input type="Button" value="Done" id="doneButton"></input>

CSS

* {
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: normal;
}
.wrapper {
    position: relative;
    width: 400px;
    height: 100px;
}
.wrapper > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    resize: none;
    white-space: pre-wrap;          /* CSS3 */   
    white-space: -moz-pre-wrap;     /* Firefox */    
    white-space: -pre-wrap;         /* Opera below 7 */   
    white-space: -o-pre-wrap;       /* Opera 7 */    
    word-wrap: break-word;          /* IE */
}
.highlighter {
    background-color: #eee;
    color: #f0f;
}
.highlight {
    background-color: #fd8;
    color: #f0f;
}
textarea {
    background-color: transparent;
    color:#000;
}

JAVASCRIPT

function limitTextSize(e) {
    var max = 140
    var txt = $("#textarea1").val();
    var left = txt.substring(0, max);
    var right = txt.substring(max);
    var html = left + '<span class="highlight">' + right + "</span>";
    $("#overflowText").html(html);
    $("#counter").html("Letters remaining: " + (max - txt.length));
    $("#doneButton").attr("disabled", txt.length > max);
}

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}
$(document).ready(function() {
    $("#textarea1").bind('input propertychange', limitTextSize)
    maxLength($("#textarea1"));
});

It uses JQuery

It works except on firefox. To see the bug, paste this into the textarea:

fjdf hkj hfj hdfkjsd hfllll sdfl sdlflldsf lsdlf flsdlf lsdf lsdf llsdfls dlfs ldflsd f

Which exposes the small difference in formatting between div and textarea (in firefox only). I've made the 'hidden' text purple so you can see the word wrap difference.

I've looked here: How to force Firefox to render textarea padding the same as in a div?

And here: Wrapping the text the same way in a div as in a textarea

And here: Firefox textarea sizing bug?

But none of those seem to apply...

I thought about trying to make it a contenteditable div but getting the change events looks like a minefield.

Has anyone here done this successfully?

Answer 1

I think you are running into an issue where Firefox adds 1.5px of padding inside textarea elements.

Firefox has had quite some issues with paddings in combination with textareas in the past, I think you might not be able to get rid of these additional 1.5px of padding.

I was able to fix your wrapping issue by setting some vendor specific prefixed CSS properties on div.highlighter. Here's a jsFiddle.

.highlighter {
  background-color: #eee;
  color: #f0f;
  -moz-box-sizing: border-box;
  -moz-padding-end: 1.5px;  
  -moz-padding-start: 1.5px;      
}

Setting these properties ensures that

1. In Firefox, the padding set on the div does not increase the width of the div, and
2. that, in Firefox, 1.5px of padding will be set on both the right and the left hand side of the div.

Update

After some time of using 2px and still very occasionally experiencing some wrapping inconsistencies, I decided to give 1.5px a go, and for now that seems to have ironed out the occasional inconsistencies.