我正在尝试复制 facebook 状态更新的功能,其中突出显示帖子中的标签。例如,您点击“@”字符,并自动完成您喜欢的页面,然后即使您继续键入,标记的文本部分也会突出显示。
在深入研究 dom 之后,他们似乎采用了类似于此 previous answer 推荐的技术来实现这一目标。 : 将绝对定位的 div 覆盖在文本区域的顶部,标签被 <b>
包围和 css 来突出显示 <b>
覆盖内的标签。他们添加的一个关键调整是在叠加层上使用 color:transparent 以便只显示高光。
这避免了将文字写在自身之上的难看的变暗。请注意,如果没有此规则(当我在 Chrome 的 dom 检查器中禁用它时),facebook 的更新栏具有双文本效果:
到目前为止一切顺利,但我现在遇到的是 color:transparent 在 ie 中不受支持,因此存在难看的双文本效果。我查看了 ie8 中的状态更新框,facebook 似乎解决了这个问题,但开发人员工具不够强大,无法检查 dom 并查看它们在做什么(该页面的 css 检查似乎已损坏)。
这是我目前所拥有的,在 chrome 中看起来不错:
在 IE8 中使用双文本很糟糕:
有什么想法吗?并且请保留对特定覆盖技术的建议,我知道我可以尝试使用一些大喇叭 iframe 嵌入富文本编辑器,但这实际上是一个简单的增强功能,最多只能应用于几行文本。
完整代码如下。
html:
<div class="textarea textareaBorder">
<textarea id="myTextarea" class="textarea realTextarea"></textarea>
<div id="myOtherTextarea" class="textarea overlayTextarea"></div>
</div>
CSS:
.textarea {
font-family:monospace;
font-size: 12px;
border: 0;
width: 100%;
height: 200px;
}
.realTextarea {
margin: 0;
background: transparent;
position: absolute;
z-index: 999;
}
.overlayTextarea {
margin: 0;
position: absolute;
color:transparent;
top: 1px;
left: 1px;
z-index: 998;
}
.overlayTextarea b {
background:#add8e6;
}
.textareaBorder {
border: groove 1px #ccc;
position: relative;
width: 702px;
height: 202px;
}
JavaScript:
$("textarea.realTextarea").keyup(function(e) {
var textval = $(e.target).val();
var markedup = textval.replace(/(the magic word)/g, "<b>$1</b>")
$("#myOtherTextarea").html(markedup);
});
最佳答案
要解决 IE 上缺少透明颜色的问题,您可以将突出显示的文本及其周围的内容放在额外的 <span>
中。元素,使用 filter 将它们的不透明度强制为零, 并保留 <b>
的背景颜色元素。
当然,<span>
元素需要 have layout使过滤器工作,并设置它们的 display属性(property)inline-block
会弄乱空格,所以你需要通过设置他们的 white-space 来弥补这一点属性(property)pre
.
CSS:
.overlayTextarea b {
background: #add8e6;
}
.overlayTextarea span {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
display: inline-block;
white-space: pre;
}
Javascript:
$("textarea.realTextarea").keyup(function(e) {
var textval = $(e.target).val();
var markedup = textval.replace(/(.*)(the magic word)(.*)/g,
"<span>$1</span><b><span>$2</span></b><span>$3</span>");
$("#myOtherTextarea").html(markedup);
});
关于javascript - 颜色 :transparent on text in ie (highlight text in textarea using overlay technique)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4113228/