12

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

textarea {
   background: transparent;
   opacity: 0;
}

当我输入不可见的文本时，我需要看到文本插入符号的移动。

编辑：我需要制作编辑器来编辑表中的 td 单元格。当我单击一个单元格时，我会显示一个文本区域并开始输入。在每个字符字母上，我在单元格中插入一个上下文。之后，我隐藏了一个文本区域。

4

4 回答 4

7

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

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

状态更新： 我已经改进了上面的 jsFiddle DEMO，这个新版本的标题是：

jsFiddle 新方法！

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

于 2012-07-17T06:05:46.407 回答
4

是时候投入我的 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>

我接近它的方式是每次在文本区域“test”中输入一个字符时，将其复制到隐藏的文本框中，然后用空格替换“test”中除 ^ 之外的所有字符。人物隐藏了，克拉还在。全文仍在另一个框中。您可以使用 display:hidden 而不是 display:block 来隐藏它。

这并不是世界上最好的实现，只是我快速完成的事情。您必须输入一种慢速（~15-20 WPM）才能使其工作。

于 2012-07-23T19:59:37.020 回答
2

这是使文本本身透明的 CSS3 解决方案：

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

唯一的问题是插入符号不可见。我进行了快速搜索，发现插入符号及其样式完全由浏览器支配。因此，我能为您想到的唯一选择是使用 Javascript 在您输入的内容的末尾添加一个模拟插入符号。

我有一个如何做到这一点的想法，但它很混乱，我不会完全称它为理想 - 但是，我会写它以防它有助于进一步别人的想法：

  1. 向页面添加隐藏标签
    • 确保它是隐藏的而不是隐藏的display: none;（以便它具有实际宽度）
    • 设置white-space: nowrap;为将其全部放在一行上）
    • 确保文本的样式与 textarea 中的文本完全相同
  2. 在 textarea 之前添加元素<span id="caret">|</span>（我将在规范的其余部分将其称为插入符号）
    • 将其位置设置为position: relative;
    • 增加其 z-index 以使其覆盖
    • 向右移动以将其设置在 ACTUAL 插入符号的初始位置的顶部
  3. 创建一个函数来检查 textarea 的值并检查 textarea 的宽度与插入符号的位置（如果您不知道如何执行此操作，请查找 selectionStart）
    • 这里的问题是字符并不总是相同的长度，它们也不总是与其他字体中对应的长度相同
    • 为了解决这个问题，当文本输入到 textarea 时，您应该在步骤 1 中创建的隐藏标签中模仿它
      • 仅模仿从 textarea 开始到插入符号当前位置的文本
      • 将每个字符（包括空格）包装在自己的跨度中
    • 接下来你将不得不调用一个函数来比较标签的宽度和文本区域的宽度
      • 如果标签的宽度小于文本区域，则获取隐藏标签中最后一个跨度的宽度并将插入符号向右移动该宽度，然后继续执行步骤 4
        • 因为这是函数将在输入文本时运行它会一次出现一个字符
        • 在这里要小心，当插入符号位于最后一个和接近最后一个位置时，它不会超出文本区域
      • 如果标签比文本区域宽：
        • 一次添加一个标签中字符（跨度）的宽度，直到达到 textarea 的宽度
        • 将插入符号的位置向下移动字体的高度并返回到水平起始位置（因为插入符号的位置是相对的，只需将其左侧位置更改回(0 + offsetToACTUALCaretPosition)
        • 使用标志（例如class="break"）标记上一行中的最后一个跨度（字符）
        • 再次调用宽度比较函数
          • 确保包含一个条件来检查您在每个“行”末尾添加的标志（如果有）
  4. 如果您还没有，请将任何所需的 CSS 样式应用于插入符号跨度并将 textarea 文本的颜色更改为color: rgba(0,0,0,0);

注意事项：

  • 对于它所做的微小工作，这将产生很多开销
  • 您将不得不调整此方法以考虑填充
  • 您必须调整此方法以添加对删除字符和将插入符号移动到较早位置（左侧）的支持
  • 如果您让 textarea 可滚动，则必须添加对此的支持（也适用于类似设置，例如静态高度导致文本滚动或移出屏幕/移出 textarea 的可见区域）

正如我之前所说，我知道这个解决方案非常粗糙，但它可能会帮助某人想出一个更好的解决方案。

祝你好运！

于 2012-07-29T04:28:48.760 回答
-4

根据您的编辑，如果您只需要隐藏文本区域，为什么不使用 jQuery$('#your_id').hide();

于 2012-07-17T06:12:33.023 回答