Question

情况

之前已经问过这个问题，但我从未见过一个好的解决方案。首先，我将解释我的情况，所以先阅读，因为我已经知道你想问：'你为什么要这样做？'..

我在输入之上有一个div。我使输入内容适合，div也是如此。因此，宽度始终与文本本身的宽度完全相同。（使用javascript：Math.max(offsetWidth, scrollWidth)）

显然，我这样做，因为我想拥有自己的输入对象。但由于你不能在输入中使用html，我在它上面有这个div层，所以我更灵活。但是我仍然需要它下面的输入，因为几乎不可能在div中单击并选择文本并从鼠标坐标获得良好的插入符号位置。因此，我将输入放在div的顶部，但将其设为opacity = 0。这给了我很好的隐身性，但仍然能够正确地聚焦输入。

问题

在IE（我只测试IE8）中，即使不透明度设置为零，HTML输入元素中的插入符号也始终可见。

问题

考虑到情境的限制 - 因此输入必须是可编辑和可见的，但不透明度为零 - 即使不透明度设置为零，我如何为每个浏览器的HTML输入元素隐藏插入符？

试用代码

jsFiddle

<?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中它保持完全不透明。

Answer 1

<script>
$('div').mouseup(function(){
    $(this).blur()
})
</script>
<div contenteditable='true'></div>

Answer 2

好的，所以在我完成这个之后，我真的想得到一个答案。实际上，我找到了解决自己问题的完美解决方案。这不是一个很好的直接解决方案，而是一种适用于我特定情况的解决方法。

解决方案在于，当元素溢出时，插入符号未显示在IE中，溢出设置为隐藏。因此，如果你有：

<div style="overflow: hidden;position: relative;">
    <input type="text" style="position: absolute;top: -30px;" />
</div>

如果输入具有焦点（通过可聚焦元素的标签），您将看到未显示插入符号。因此，解决方案是将输入元素设置为height: 60px;并设置top: -30px;。现在你仍然可以按下不可见的输入，但是插入符号隐藏在溢出的某个地方。

但现在出现了一个新问题。如果您没有在线路上选择文本，则无法在输入中选择文本。所以，我不得不在其中做一些讨厌的javascript，如果我在输入上执行onmousedown，输入将更改回top: 0px;height: 30px;，反之则在onmouseup事件中。这可以安全地完成，因为选择文本时不存在插入符号。

我在FF和IE8中测试了这个解决方案，现在完整的东西完美无缺。我把整件事放在互联网上：https://jsfiddle.net/90L5jme6/。您可以通过将输入的不透明度设置为0.2并将inputcontainer的溢出设置为可见来查看选择机制的工作原理。

如何在不透明度为零时隐藏HTML文本输入中的插入符号？（IE）

情况

问题

问题

试用代码

2 个答案:

如何在不透明度为零时隐藏HTML文本输入中的插入符号？ （IE）

情况

问题

问题

试用代码

2 个答案:

如何在不透明度为零时隐藏HTML文本输入中的插入符号？（IE）