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

How to hide the text box blinking cursor?

提问by Santhosh

I need to hide the text box blinking cursor in CSS / Javascript.

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

Is it possible?

是否可以？

采纳答案by gcb

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

because i can't see any other reason you might want to do that.

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

edit:

编辑：

i guessyou want to allow the user to scroll the text that is larger than the area, but not show the blinking?

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

if that is so, you still want to disable it. not just hide the blinking cursor. if the user can't type there, it should be disabled. period.

如果是这样，您仍然希望禁用它。不只是隐藏闪烁的光标。如果用户不能在那里打字，它应该被禁用。时期。

now, if you still want to allow the user to see all the content, you have to make the input as big as the content. there is no escaping that.

现在，如果你仍然想让用户看到所有的内容，你必须让输入和内容一样大。没有办法逃避这一点。

and then limit the size with a parent divwith CSS overflow: hiddenor scroll.

然后div使用 CSSoverflow: hidden或scroll.

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

回答by Kevin McTigue

You could set a maxlengthon the textbox and then use text-indentto move the cursor back more characters than the maxlength.

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

For example, you could set maxlength=20and then for the text box set text-indent: -20emthat way the text starts out of the box's boundaries and can't ever come into view.

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

回答by Lajos Meszaros

Here is my solution from another question, that I answered already:

这是我从另一个问题中得到的解决方案，我已经回答了：

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

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

---

---

The basic idea is, that the cursor's color is the same as the text's color. So the first thing you do is make the text transparent, thus taking the cursor away with it. Then you can make the text visible again with a text shadow.

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

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

Warning:

警告：

It does not seem to work under iOS 8. (Thanks @Altaveron for the info)

它似乎在 iOS 8 下不起作用。（感谢 @Altaveron 提供信息）

---

---

Another idea of my is a bit more hacky and requires javascript.

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

HTML and CSS part:

HTML 和 CSS 部分：

You make 2 input fields and position one exactly on top of the another with z-index, etc. Then you make the top input field completely transparent, no focus, no color, and alike. You need to set the visible, lower input to disabled, so that it only shows the content of the above input, but not actually works.

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

Javascript part:

Javascript部分：

After all the above you sync the two inputs. On keypress or on change you copy the contents of the higher input to the lower.

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

Summing all the above: you type in an invisible input, and that will be sent to the backend when the form submitted, but every update of the text in it will be echoed into the lower visible, but disabled input field.

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

回答by sagittarian

This is pretty old, but I was just dealing with a similar issue. For browsers that support it (meaning, not IE8), you can set the color of the input element to be the same as its background (probably white), and then the cursor will be invisible.

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

回答by joegeringer

If it's an input with the readonly="readonly" attribute on it, Safari on iOS still shows a blinking cursor when focusing on it.

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

So to remove the blinking, the following worked for me:

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

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