除了textarea中的'text-caret'之外,如何使用透明字体？

Question

我有一个简单的textarea,我需要制作透明字母,同时允许文本插入符号可见.当我应用以下规则时,我会得到隐形插入符号:

textarea {
   background: transparent;
   opacity: 0;
}

当我输入不可见的文本时,我需要看到text-caret移动.

编辑:我需要编辑编辑表格中的td单元格.当我点击一个单元格时,我会显示一个textarea并开始输入.在每个字母上,我在单元格中插入一个上下文.在那之后,我隐藏了一个textarea.

Answer 1

这个jsFiddle DEMO使用了一个在线教程方法,该方法经过轻微修改,可以创建非原生 browser text-caret文本和透明文本.

此外,我创建的这个jsFiddle新方法以不同的方式处理该目标,但不是IE8友好的.

状态更新: 我使用这个标题为的新版本改进了上述jsFiddle DEMO:

上面的jsFiddle版本现在允许单击文本区域的内部,并且插入符号将尊重该单击的位置.这个额外的功能是通过一个很好的问题和答案来实现的.