javascript - 除了在 Firefox 中，Div 和 textarea 的行为相同 - 怎么办？

Question

我想创建一个文本区域，突出显示超出字符限制的文本(如 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 上除外。要查看错误，请将其粘贴到文本区域:

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

这揭示了 div 和 textarea 格式之间的细微差别(仅在 firefox 中)。我将“隐藏”文本设为紫色，这样您就可以看到自动换行的区别。

我看过这里:How to force Firefox to render textarea padding the same as in a div?

这里:Wrapping the text the same way in a div as in a textarea

这里:Firefox textarea sizing bug?

但这些似乎都不适用......

我想尝试让它成为一个内容可编辑的 div，但获取更改事件看起来像雷区。

这里有人成功过吗？

Answer 1

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

Firefox 已经相当 some issues与 paddings在 combination with textareas在过去，我认为您可能无法摆脱这些额外的 1.5px 填充。

我能够通过在 div.highlighter 上设置一些特定于 vendor 的前缀 CSS 属性来解决您的包装问题。这是一个 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 中，将在 div 的左右两侧设置 1.5px 的内边距。

更新

在使用 2px 一段时间后，仍然偶尔会遇到一些包装不一致的情况，我决定尝试一下 1.5px，现在似乎已经解决了偶尔的不一致。