如何隐藏文本框闪烁的光标？答案

【问题标题】：How to hide the text box blinking cursor?如何隐藏文本框闪烁的光标？
【发布时间】：2010-01-29 13:23:30
【问题描述】：

我需要在 CSS / Javascript 中隐藏文本框闪烁光标。

有可能吗？

【问题讨论】：

【解决方案1】：

您可以在文本框上设置maxlength，然后使用text-indent 将光标向后移动超过最大长度的字符。

例如，您可以设置maxlength=20，然后为文本框设置text-indent: -20em，这样文本开始超出框的边界并且永远不会出现。

【讨论】：

【解决方案2】：

这是我已经回答的另一个问题的解决方案：

基本思想是，光标的颜色与文本的颜色相同。因此，您要做的第一件事就是使文本透明，从而将光标移开。然后，您可以使用文本阴影使文本再次可见。

输入[类型=“文本”]{ 颜色：透明；文字阴影：0 0 0 #000; } 输入[type="text"]:focus{ 大纲：无； }

警告：

它似乎不适用于 iOS 8。（感谢@Altaveron 提供信息）

我的另一个想法有点hacky，需要javascript。

HTML 和 CSS 部分：

您制作了 2 个输入字段，并使用 z-index 等将一个精确定位在另一个的顶部。然后您使顶部输入字段完全透明，没有焦点，没有颜色等。您需要将可见的下部输入设置为禁用，使其仅显示上述输入的内容，但实际上不起作用。

Javascript 部分：

完成上述所有操作后，您可以同步两个输入。在按键或更改时，您会将较高输入的内容复制到较低的输入。

总结以上所有内容：您输入了一个不可见的输入，并且在提交表单时将其发送到后端，但其中文本的每次更新都会回显到较低的可见但禁用的输入字段。

【讨论】：

【解决方案3】：

这已经很老了，但我只是在处理类似的问题。对于支持它的浏览器（也就是说，不是IE8），您可以将输入元素的颜色设置为与其背景相同（可能是白色），然后光标将不可见。

【讨论】：

【解决方案4】：

<input type=text disabled="disabled"/>

因为我看不出您可能想要这样做的任何其他原因。

编辑：

我猜你想让用户滚动大于区域的文本，但不显示闪烁？

如果是这样，您仍然想禁用它。不仅仅是隐藏闪烁的光标。如果用户不能在那里输入，它应该被禁用。期间。

现在，如果您仍然想让用户看到所有内容，您必须使输入与内容一样大。没有什么可以逃避的。

然后使用 CSS overflow: hidden 或 scroll 限制父级 div 的大小。

<div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div>

【讨论】：

正确的属性值是disabled而不是true：disabled="disabled"。
@Gumbo：这对 XHTML 来说是正确的，但通常不需要使用 XHTML。最简单的方法是用 HTML 编写页面，只使用disabled，没有任何价值。
@Tim Down：HTML 的正确值也是disabled。只是属性值可以省略，因为隐含了唯一有效的属性值disabled（请参阅w3.org/TR/html4/interact/forms.html#adef-disabled）。
@Gumbo：是的。在 HTML 4 中使用布尔属性有两种正确的方法：单独使用没有值或使用与其名称相同的值。尽管w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 底部的以下行值得注意：“作者应该意识到许多用户代理只识别布尔属性的最小化形式而不是完整形式。”。跨度>
正确答案如何？这不符合要求......我们正在寻找的是隐藏插入符号但仍然启用输入

【解决方案5】：

如果它是一个带有 readonly="readonly" 属性的输入，iOS 上的 Safari 在聚焦它时仍然会显示一个闪烁的光标。

所以要消除闪烁，以下对我有用：

-webkit-user-select: none; 
user-select: none;

【讨论】：