Div and textarea behave the same, except in Firefox - what should I do?

Question

I want to create a text box that selects the text outside the character (for example, twitter).

My attempt 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 firefox. To see the error, paste it into the text box:

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

which reveals a slight formatting difference between div and textarea (firefox only). I made the “hidden” text purple so you can see the word wrap.

I looked here: How do I get Firefox to display textarea debugging just like in a div?

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

And here: Fixed a bug in the size of the text area of ​​Firefox

But none of them fit ...

I was thinking of trying to make its content accessible div, but getting change events looks like a minefield.

Has anyone here done this successfully?

Answer 1

I think you 1.5px into a problem when Firefox adds 1.5px indentation inside textarea elements.

Firefox had quite a few problems with paddings in combination with text fields in the past, I think you cannot get rid of these extra 1.5px add-ons.

I managed to fix your packaging problem by setting some CSS properties prefixed with a specific provider to div.highlighter . Here is 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

• In Firefox, a set of padding on a div does not increase the width of the div
• that in Firefox 1.5px indentation will be set both to the right and to the left of the div .

Update

After some time using 2px and still encountering some packaging inconsistencies very often, I decided to give 1.5px a go, and at the moment this seems to 1.5px random inconsistencies.

Answer 2

This is due to the font size used. Since the device used is point (pt) , the computed size in the browsers is different enough to cause the string to be wrapped incorrectly.

Try these styles:

 * { font-family: sans-serif; font-size: 12px; font-weight: normal; } body { font-size: 1em; } 

Jsfiddle

You may need to make changes to the size of the container to make changes to the font size.

Answer 3

Well, a couple of things happen here. Typically, the safest display element in the browser that you find is the pre tag. He assumes that what you feed him is “pre-formatted”, hence the name. This will benefit us in several ways:

• As far as I know, the default styling is not performed by any main browser executed in the pre element.
• The pre element will keep leading / trailing spaces, tabs, and other special characters in the field.

Replace span.highlighter with pre.highlighter

This will help us get started. The second thing we want to pay attention to is the superimposed colors, which create some rather strange stacking effects in Firefox. The text does not look out of focus in the FF20, and I can only imagine that letting the browser decide how it looks will be a disaster in the future.

Set the textarea color to transparent .

Now we are there. I see persistent packaging in IE10 / 9, FF20 and Chrome 26.

Here is a jsFiddle example