Div和textarea的行为相同，但在Firefox中 - 做什么？

问题描述

我想创建一个textarea，突出显示超出字符限制的文本（如twitter）。

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

我的尝试在这里：

<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

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

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中：

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

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

这暴露了div和textarea之间格式的小差异（仅在firefox中）。

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.

我看过这里：

此处：

And here: Firefox textarea sizing bug?

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

But none of those seem to apply...

我想过尝试使它成为一个可感知的div，但获得更改事件看起来像一个雷区。

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?

推荐答案

Firefox会在 textarea 元素中添加 1.5px

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

Firefox有相当的与在过去的组合中，我认为您可能无法摆脱这些额外的 1.5px 的填充。

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.

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

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

.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 的一侧。

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.

更新

在使用 2px 一段时间后，仍然偶尔遇到一些包装不一致，我决定给予 1.5px a go，现在似乎已经解决了偶尔的不一致。

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.

这篇关于Div和textarea的行为相同，但在Firefox中 - 做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！