情况
这个问题以前有人问过，但我从未见过好的解决方案。首先我会解释我的情况，所以先阅读，因为我已经知道你想问:“你为什么要这样做？”..
我在输入顶部有一个 div。我使输入内容适合，div也是如此。因此，宽度始终恰好是文本本身的宽度。 (使用的JavaScript:Math.max(offsetWidth,scrollWidth))
显然，我这样做是因为我想要拥有自己的输入对象。但由于你不能在输入中使用 html，所以我在它上面有这个 div 层，所以我更灵活。但我仍然需要它下面的输入，因为几乎不可能单击并选择 div 中的文本并从鼠标坐标获取正确的插入符位置。
因此，我将输入放在 div 顶部，但使其 opacity = 0。这给了我很好的隐形性，但仍然能够正确地聚焦输入。
问题
在 IE 中(我仅测试了 IE8)，即使不透明度设置为零，HTML 输入元素中的插入符号也始终可见。
问题
考虑到情况的限制 - 因此输入必须是可编辑和可见的，但不透明度为零 - 即使不透明度设置为零，如何在每个浏览器的 HTML 输入元素中隐藏插入符号？
试用代码
<?xml version="1.0" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
position: relative;
}
html, body
{
width: 100%;
height: 100%;
}
.hidden_input
{
-moz-opacity: 0.2;
opacity: 0.2;
filter: alpha(opacity=20);
float: left;
}
.visible_output
{
position: absolute;
float: left;
white-space: pre;
}
</style>
</head>
<body>
<input type="text" id="in" onkeyup="document.getElementById('out').innerHTML=this.value;" class="hidden_input" />
<div id="out" class="visible_output"></div>
</body>
</html>
请注意，存在一些空白问题，并且输入不适合内容，但这并不是这里问题的真正一部分。另外，为了更加清晰，我将输入不透明度设置为 0.4 而不是 0。这应该很容易演示 FF 中的插入符如何变得半透明，但在 IE 中它保持完全不透明。
最佳答案
<script>
$('div').mouseup(function(){
$(this).blur()
})
</script>
<div contenteditable='true'></div>
关于html - 当不透明度为零时，如何隐藏 HTML 文本输入中的插入符号？ (IE)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9413401/