Question

我正在尝试创建一个textarea控件，可以在其中提及其他用户。该功能与Facebook中的功能非常相似，实现也类似。当用户键入“@”时，会显示一个下拉列表，从中可以选择一个用户，然后在textarea中显示一个突出显示。为了能够在textarea中有选择地渲染高光，我使用的是具有相同文本的叠加div，但使用span标记来创建高光。

叠加层具有相同的宽度，相同的字体和字体大小，相同的字母间距，相同的行高等，以确保所有高光与文本区域中的文本正确对齐。叠加div中的所有文本（高亮部分本身除外）都是透明的，以避免在文本上呈现消除锯齿的文本。

这一切都很有效，除了当有提及高亮显示时，高亮显示中的文字在某种程度上比文本区域中的文本稍微宽一点，这会导致非常轻微的不匹配。更糟糕的是，当存在多个高光时，这种小的不匹配会累积，并且它有时会导致一条线包裹在textarea中而不是div中，之后整个幻觉就会崩溃。

我已经确认所有文本渲染选项对于textarea中的文本以及叠加层和高光中的文本都完全相同。所有都有相同的字体，字体大小，字母间距，行高，亮点上没有边距，边框或填充等。我也查看了WebKit Inspector，看看我是否可能错过任何可能的属性仍会影响文本呈现，但找不到任何内容。简单地说，我无法解释这种轻微的渲染差异来自何处。

请注意，只要叠加层不包含任何高光，渲染差异就会不。

我还尝试过只渲染叠加层而不是渲染textarea（而不是让叠加层在高光区之外是透明的），但这有一个令人讨厌的副作用，我再也看不到任何光标了。

是否有一些我仍然可能忽略的CSS属性，或者是否有其他原因导致文本分成多个跨度会导致文本的总宽度与不间断的文本节点略有不同？任何建议将不胜感激！

更新：对于可能遇到此问题的其他人，请参阅以下jsfiddle：http://jsfiddle.net/brt8w85z/5/

<style type="text/css">
.parent {
    text-rendering: optimizeLegibility;
    position: relative;
}

textarea {
    border: 0;
    color: #000;
    resize: none;
}

.overlay {
    color: transparent;
    pointer-events: none;
}

textarea,.overlay {
    font-family: Helvetica,sans-serif;
    font-size: 12px;
    left: 10px;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10px;
    width: 200px;
}

.highlight {
    background-color: #00f;
    color: #fff;
}
</style>
<div class="parent">
    <textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>

    <div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>

可以通过在“textarea，.overlay”规则中添加“text-rendering：geometricPrecision”来解决此问题。

Answer 1

似乎我自己找到了解决方案：在身体上有＆＃34;文本呈现的定义：optimizeLegibility＆＃34;。将其设置回＆＃34; text-rendering：geometricPrecision＆＃34;在textarea上解决了这个问题。之前不明显的原因是因为WebKit Inspector没有在textarea上显示继承的文本呈现，即使它对（大多数？）其他继承属性也这样做。

div和textarea之间的文本宽度不匹配

1 个答案: