Question

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

有可能吗？

Answer 1

您可以在文本框中设置maxlength，然后使用text-indent将光标移回比maxlength更多的字符。

例如，您可以设置maxlength=20，然后为文本框设置text-indent: -20em，文本框从框的边界开始，无法进入视图。

Answer 2

以下是我在另一个问题上的解决方案，我已经回答：

https://stackoverflow.com/a/23472096/1806628

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

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
    outline : none;
}

警告：

它似乎无法在iOS 8下运行。（感谢@Altaveron获取信息）

我的另一个想法是更加hacky并且需要javascript。

HTML和CSS部分：

您可以使用z-index等制作2个输入字段并将其准确地放在另一个字段的顶部。然后，您可以使顶部输入字段完全透明，无焦点，无颜色等。您需要将可见的较低输入设置为禁用，以便它仅显示上述输入的内容，但实际上不起作用。

Javascript部分：

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

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

Answer 3

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

Answer 4

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

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

编辑：

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

如果是这样，你仍然想要禁用它。不只是隐藏闪烁的光标。如果用户无法在那里输入，则应禁用它。周期。

现在，如果您仍希望允许用户查看所有内容，则必须使输入与内容一样大。没有逃脱。

然后使用CSS div或overflow: hidden为父scroll限制尺寸。

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

Answer 5

如果它是一个readonly =“readonly”属性的输入，那么iOS上的Safari在聚焦时仍会显示一个闪烁的光标。

所以为了消除眨眼，以下对我有用：

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

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

5 个答案: