除Firefox外,Div和textarea的行为相同 - 怎么办？

Question

我想创建一个textarea,突出显示超出字符限制的文本(如twitter一样).

我的尝试在这里: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"));
});

它使用JQuery

它的工作原理除了在Firefox上.要查看错误,请将其粘贴到textarea中:

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

这暴露了div和textarea之间格式的细微差别(仅在firefox中).我已将"隐藏"文字设为紫色,以便您可以看到自动换行的区别.

我看过这里:如何强制Firefox渲染textarea填充与div中相同？

在这里:在div中以与textarea相同的方式包装文本

在这里:Firefox textarea大小调整bug？

但似乎没有一个适用......

我想尽量让它成为一个令人满意的div,但是让变革事件看起来就像雷区.

这里有人成功完成了吗？

Answer 1

我认为您遇到了 Firefox在元素1.5px内部添加填充的问题textarea。

Firefox 过去在填充与文本区域结合方面遇到了很多问题，我认为您可能无法摆脱这些额外的填充。1.5px

我能够通过在 上设置一些供应商特定的前缀 CSS 属性来解决您的换行问题 div.highlighter。这是一个jsFiddle.

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

设置这些属性可确保

1. 在 Firefox 中，设置的内边距div不会增加 的宽度div，并且
2. 在 Firefox 中，1.5px填充将设置在div.

更新

经过一段时间的使用后2px，仍然偶尔遇到一些包装不一致的情况，我决定尝试一下1.5px，目前看来已经解决了偶尔的不一致问题。