5

我想创建一个 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 中）。我已将“隐藏”文本设为紫色，以便您可以看到自动换行的区别。

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

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

在这里：Firefox textarea 大小调整错误？

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

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

这里有没有人成功做到这一点？

4

3 回答 3

4

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

Firefox 在过去与 textareas 结合使用填充时遇到了很多问题，我认为您可能无法摆脱这些额外的填充。1.5px

我可以通过在 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试一试，现在这似乎已经解决了偶尔出现的不一致问题。

于 2013-05-13T23:37:01.360 回答
0

这与所使用的字体大小有关。由于使用的单位是point (pt)，因此计算的大小在浏览器中的差异足以导致错误的换行。

请尝试以下样式：

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

body {
    font-size: 1em;
}

JSFiddle

您可能必须更改容器大小以适应字体大小的变化。

于 2013-05-13T07:09:04.803 回答
0

好的，这里发生了几件事。通常，您会发现最安全的跨浏览器显示元素是pre标签。它假定您输入的内容是“预先格式化的”，因此得名。这将在几个方面使我们受益：

  1. 据我所知，任何主要浏览器都没有对pre元素进行默认样式设置。
  2. 该pre元素将在框中保留前导/尾随空格、制表符和其他特殊字符。

替换span.highlighter为pre.highlighter

这会让我们开始。我们要查看的第二件事是重叠的颜色在 Firefox 中创建了一些相当奇怪的堆叠效果。FF20 中的文字看起来没有焦点，我只能想象让浏览器决定它的外观将是一场灾难。

将颜色设置textarea为transparent。

现在我们到了。我在 IE10/9、FF20 和 Chrome 26 中看到了一致的包装。

这是一个示例 jsFiddle

于 2013-05-13T20:57:58.280 回答