如何在textarea中除了'text-caret'之外有透明字体？ [英] How to have transparent fonts except for the 'text-caret' in a textarea?

问题描述

我有一个简单的textarea，我需要使透明字母，同时允许text-caret是可见的。当我应用以下规则时，我会得到隐形插入符：

I have a simple textarea and I need to make transparent letters while allowing the text-caret to be visible. When I apply the following rules then I get invisible caret:

textarea {
   background: transparent;
   opacity: 0;
}

当我键入不可见的文本时，我需要看到text-caret move。

When I type invisible text, I need to see the text-caret move.

编辑：我需要使编辑器在表格中编辑td单元格。当我点击一个单元格时，我显示一个textarea并开始输入。在每个字符上，我在单元格中插入上下文。

I need to make editor to edit td cell in table. When I click on a cell I show a textarea and start typing. On a each character letter, I insert a context in a cell. After that, I hide a textarea.

推荐答案

此 jsFiddle DEMO 使用了一个在线教程方法，该方法稍作修改以创建 非本机 code> browser text-caret 以及透明文本。

此外，此 jsFiddle新方法 我创建的目标不同，但不是IE8友好。

Also, this jsFiddle New Method I created handles that goal differently but isn't IE8 friendly.

状态更新： 我使用此较新版本版本改进了上述jsFiddle DEMO标题：

Status Update: I've improved the above jsFiddle DEMO with this newer version titled:

jsFiddle新方法更新！ ！

上述jsFiddle版本现在允许点击文本区域 将尊重点击的位置。这个额外的功能是通过一个很好的问题和回答 这里 实现的。

The above jsFiddle version now allows the inside of the text-area to be clicked and the caret will respect that clicked location. This extra functionality was made possible by a great question and answer here.

这篇关于如何在textarea中除了'text-caret'之外有透明字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！