如何拥有除了在textarea中的“文本插入符号”透明字体？(How to have transpa

我有一个简单的textarea，我需要做透明的信件，同时允许文本插入符可见。当我申请以下规则然后我得到无形的插入符号：

textarea {
   background: transparent;
   opacity: 0;
}

当我键入隐形文字，我需要看到文本移动插入点。

编辑：我需要编辑在编辑表TD手机。当我点击一个单元格我给一个文本并开始输入。在每一个字符字母，我插入细胞的上下文。在那之后，我躲在一个文本。

Answer 1:

这的jsfiddle DEMO使用已经略作修改，以建立一个非母语的在线教程方法browser text-caret透明文本一起。

此外，该的jsfiddle新方法 ，我创建处理这一目标不同，但不是IE8友好。

状态更新：我已经改善了与这个名为新版本以上的jsfiddle DEMO：

的jsfiddle新方法这是较新的！

上述的jsfiddle版本现在允许单击文本区域的内部和光标将尊重点击的位置。这种额外的功能是由一个很大的问题成为可能，并回答在这里 。

Answer 2:

时间把我的$0.02英寸

这是一个问题的答案，我的理解是，这样的作品，它的快速和肮脏的，所以放心大胆的建议。此代码是未经测试，但我在这里做创建工作小提琴： http://jsfiddle.net/66RXc/

<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--


function call(val) {
    document.getElementById('result').value += val.charAt(val.length - 1);


    document.getElementById('result').value = 
        document.getElementById('result').value.substr(0, val.length);


    document.getElementById('test').value = 
        document.getElementById('test').value.replace(/[^\^]/g, ' ');

}
-->
</script>
</head>
<body>

<textarea name="textarea" cols="20" rows="5" id="test"
 onKeyUp="call(this.value);"></textarea>

<textarea style="display:block" cols="20" rows="5" id="result" disabled>
</textarea>

</body>
</html>

我走近它是每一个字符在文本域“测试”输入时间的方式，将其复制到一个隐藏的文本框，并更换所有的人物在“测试”除了^用空格。字符是隐藏的，而克拉仍然存在。全文依然在其他框。您可以使用显示：隐藏，而不是显示：块将其隐藏。

这不正是在世界上最好的执行，只是我做了快。你必须键入有点慢（15-20〜WPM）为它工作。

Answer 3:

这是为了使文本本身，一个透明的解决方案CSS3：

设置颜色属性是color: rgba(0,0,0,0); 文本

唯一的问题是，插入符号变为不可见的。我做了快速搜索，并发现了尖号和它的造型完全支配浏览器。因此，我可以为你想到的唯一选择是使用JavaScript来模拟插入符号添加到您所输入的内容结束。

我有一个如何做到这一点的想法，但它是凌乱的，我会不完全称之为理想 - 我，不过，要它写在情况下，它有助于进一步别人的想法：

添加一个隐藏的标签页
- 确保它是隐藏的，而不是display: none; （使之具有实际宽度）
- 设置white-space: nowrap; 保持它都在同一行）
- 确保文本样式完全一样，在textarea的文字
添加的元素<span id="caret">|</span>右之前textarea的（I将称此为插入符为规范的其余部分）
- 设置其到位置position: relative;
- 增加的Z-index，使其覆盖
- 转移它的权利，以便把它放在哪里实际插入符号的初始位置是顶
做一个函数来检查采取textarea的值，并检查textarea的宽度对符的位置（查找selectionStart，如果你不知道如何做到这一点）
- 这里的问题是，角色并不总是相同的长度，也不是总是相同的长度，他们在其他同行的字体
- 要解决这个问题，作为文本输入到textarea的，你应该有它在你在步骤1中创建的隐藏标签模仿
  - 模仿只能从textarea的开始到插入符号的当前位置的文本
  - 在自己的跨度包装的每个字符（含空格）
- 接下来，你将不得不调用一个函数的标签的宽度与textarea的宽度比较
  - 如果标签比textarea的少宽，得到最后的跨度的宽度在隐藏标签和移位插入符号由该宽度的权利，则前进到步骤4
    - 因为这是函数将被运行如输入的文字会在同一时间发生的一个字符
    - 这里要小心的是，插入符不走的文字区域以外时，它在其最后和近末位
  - 如果标签比textarea的宽：
    - 一次添加在标签的一个字符（跨度）的宽度，直到到达textarea的宽度
    - 由字体的高度移位符的位置向下并回到水平起始位置（如插入符的位置是相对的，只是改变其左侧位置返回到(0 + offsetToACTUALCaretPosition)
    - 使用标志（如class="break" ）来标记以前行的最后一个跨度（字）
    - 再次调用该宽度比较功能
      - 请确保您有一个条件来检查，你在每一个“行”的末尾添加标志（如果有的话）
如果你还没有准备好，适用于任何需要的CSS样式插入符号跨度和改变textarea的文本的颜色要color: rgba(0,0,0,0);