隐藏文本框闪烁光标

Question

我有一个文本框，有没有办法隐藏闪烁的文本光标？原因是我正在制作一个恐怖/神秘网站，其中一个线索是从任何地方开始键入。

也许我可以用JavaScript来实现？

- test

---

你尝试过设置 style='cursor: default' 吗？我不明白你所说的“闪烁”文本光标是什么意思，我的光标都没有闪烁。 - animuson

@animuson：那是用于当鼠标悬停在文本输入上时显示的鼠标光标，而 OP 正在询问闪烁的文本光标，也就是插入符号。 - BoltClock

@BoltClock 是一只独角兽：啊，文本位置。我相信那被称为插入符，而不是光标。 - animuson

@animuson 如果每个人都称之为插入符号以避免混淆那就太好了。但是你所做的区分并不是它的使用方式。我甚至听到比插入符号更多的是光标。根据dictionary.com的定义：计算机上的一个可移动、有时闪烁的符号，用于指示CRT或其他类型的显示器上下一个从键盘输入的字符将出现的位置，或者需要用户操作的位置，例如更正已经显示的错误字符。 - Ruan Mendes

X11有一个鼠标指针和文本光标，而MS-Windows有一个鼠标光标和文本插入符。这就是令人困惑的地方。我更喜欢X11的命名约定，因为它也被苹果和Amiga使用过。 - Alexis Wilke

看一下这个，你会得到你的解决方案。 https://stackoverflow.com/questions/45738397/hide-text-field-blinking-cursor-in-ie-or-even-change-blinking-cursor-color-to-wh/51328027#51328027 - Shrirang Kadale

Answer 1

基本思路是，光标的颜色与文本的颜色相同。因此，你需要将文本设置为透明，这样光标也会消失。然后，可以通过添加文本阴影再次使文本可见。

使用此链接在 jsfiddle 中实时查看示例。

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

更新：

已知在iOS 8和IE 11中无法使用。

---

我的另一个想法有点hacky，需要使用JavaScript。

HTML和CSS部分：

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

Javascript部分：

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

总结上述内容：您在不可见的输入框中输入文本，在表单提交时将其发送到后端，但每次更新它的文本时都会被回显到下方的可见但禁用的输入框中。

- Lajos Mészáros

---

谢谢提供信息，很高兴知道这不是一个通用的解决方案。在输入字段中隐藏光标没有好的解决方案，因为这是一件罕见的事情。到目前为止，没有实现有意隐藏光标的本地CSS或JS代码。我们所能做的就是制作看起来像隐藏光标的黑客程序，但不要期望它在任何地方都能正常工作。 - Lajos Mészáros

Answer 2

caret-color: transparent !important;在新版本浏览器中有效。

- cdeutsch

---

这绝对是渐进增强的最佳解决方案！ - Pier-Luc Gendreau

支持不太好是一个优点。我主要推荐它与像 Puppeteer 这样的框架一起用于自动化测试。 - cdeutsch

这应该就是答案 :) - q3e

!important 有多重要？ - alecdwm

@alecdwm 如果没有自定义CSS设置caret-color，它将正常工作。在我的用例中，我在截屏时添加样式，因此我希望覆盖可能已设置的任何自定义CSS。 - cdeutsch

Answer 3

我正在寻找一种方法来隐藏iOS设备上的闪烁光标，以便在触发日历的日期输入时，您可以看到光标在日历选择器的顶部闪烁。

input:focus { text-indent: -9999em; }

所以在这种情况下，我的CSS效果很好，显然缺点是如果您需要看到自己在输入什么，则不太好。

- Slavo

---

你可以更详细地说明一下你的答案吗？ - bwegs

抱歉，我忘记了添加：我正在寻找一种在iOS设备上隐藏日期输入触发器的闪烁光标的方法，因为你可以看到光标在日历选择器顶部闪烁。所以在这种情况下，我的CSS代码可以良好地运作，显然缺点是如果需要看到自己正在输入什么，则不太好。 - Slavo

请注意，@Slavo，你应该在答案中包含解释，而不是在评论中。请编辑你的回答。 - Palec

刚刚为他添加了它。 - Rémi Becheras

我喜欢这个答案，它带领我找到了更好的解决方案： input:focus { line-height: 0; } - gdibble

另一个奇怪的问题是：这个解决方案在IE中有效，但在Edge中无效 - 插入符号仍停留在输入框的起始位置。在开发者工具中更改Edge中的text-indent值，问题就会消失。 - ccprog

Answer 4

试试这个：

$(document).ready(
  function() {
    $("textarea").addClass("-real-textarea");
    $(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
    $(".textarea-wrapper textarea.hidden").keyup(
      function() {
        $(".textarea-wrapper textarea.-real-textarea").val($(this).val());
      }
    );
    $(".textarea-wrapper textarea.-real-textarea").focus(
      function() {
        $(this).parent().find("textarea.hidden").focus();
      }
    );
  }
);

.textarea-wrapper {
  position: relative;
}

.textarea-wrapper textarea {
  background-color: white;
}

.textarea-wrapper,
.textarea-wrapper textarea {
  width: 500px;
  height: 500px;
}

.textarea-wrapper textarea.hidden {
  color: white;
  opacity: 0.00;
  filter: alpha(opacity=00);
  position: absolute;
  top: 0px;
  left: 0px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="textarea-wrapper">
  <textarea></textarea>
</div>

这个想法是创建一个第二个、不可见的<textarea>，覆盖在真实的<textarea>上方。用户在不可见的<textarea>中输入文本，但是文本（以及光标/游标）不会出现，因为它是不可见的！然后，您可以使用JavaScript将其值分配给可见的<textarea>。

但是它似乎在IE8中无效:'(，即使不透明度调到最大，光标仍然可见。

但是它在Firefox中有效...?

- Richard JP Le Guen

---

如果你玩背景颜色和不透明度，你可以让它在IE中工作...但是背景必须是灰色而不是白色:( - Richard JP Le Guen

我遇到了类似的问题，但我只需要“focus”/“blur”事件，所以我使用了一个简单的复选框 :) - pesho hristov

为什么不直接使用onKeyPress事件将值分配给文本区域？ - Nonny Moose

你应该使用 pointer-events: none; CSS 属性，而不是这个。 - Shrirang Kadale

对于使用键盘导航的用户，这该怎么做，@ShrirangKadale？那么有些人可能会使用 tab 将焦点放在错误的文本区域上。在这里尝试一下：https://jsfiddle.net/xpo3fqLn/1/ - 在文本框中输入，然后使用 shift+tab 将焦点切换到真正的文本框，光标会回来，两个文本区域不同步。 - Richard JP Le Guen

你是对的@RichardJPLeGuen，我没有考虑到那一点。谢谢!!! - Shrirang Kadale

Answer 5

我认为这是一个完美的解决方案：将输入框宽度调整到足够宽，右对齐屏幕右侧，这样光标和内容就位于屏幕外部，但仍然可以点击。

- sinfere

---

这最终成为了最优雅的解决方案，同时涉及到keydown/up事件。 - blnc

Answer 6

很遗憾，您无法使用CSS样式文本光标。您只能尝试一些非常糟糕的JavaScript技巧，但根据您网站的布局和要求，可能完全不可行。因此，我建议您放弃整个想法。

- 2ndkauboy

---

旧的问题/答案，也许在2010年是正确的，但是在2016年，只使用CSS间接地为光标设置样式是可能的。http://stackoverflow.com/a/38373042/3377049（如果有人找到了这里） - Hastig Zusammenstellen

@HastigZusammenstellen 不支持IE浏览器。 - cyberwombat

Answer 7

<input style="position: fixed; top: -1000px">

在iOS8中有效。

- Daiwei

---

iOS的真正解决方案。谢谢。 - Umesh K.

Answer 8

将输入设置为readonly也会实现这一点，因为它防止了焦点，但对于仍需要它的许多用例可能不适用。

<input type="text" readonly />

- Chase

---

当您在IE11中切换到该字段时，光标仍然显示，无法正常工作。 - KyorCode

Answer 9

function noCursor(a){
  var a = document.getElementById(a),
      b = document.createElement('input');
  b.setAttribute("style","position: absolute; right: 101%;");
  a.parentNode.insertBefore(b, a);

  if(a.addEventListener){
    b.addEventListener("input",function(){a.value = b.value});
    a.addEventListener("focus",function(){b.focus()});
  }else{
    a.attachEvent("onfocus",function(){b.focus()});
    b.attachEvent("onpropertychange",function(){a.value = b.value});
  };
 
}

noCursor('inp');

<input id="inp">

您可以对每个您不想显示光标的元素使用此函数。

- Silvester Wennekers

Answer 10

您可以通过在焦点事件上调用blur函数来“隐藏文本框闪烁光标”。

<input type="text" onfocus="this.blur()"/>

- coder

---

谁给这个点赞了？如果你在焦点模糊时模糊它，你将永远无法在其中输入... - corescan

与原文无关，但对于不同的目的非常有用。如果将输入字段设置为“禁用”，则更改事件将不会被触发。这是一个很好的解决方法，可以保持输入字段处于禁用状态，但仍然具有附加更改事件的能力。 - But those new buttons though..

如果你只需要一个"onclick"事件的话，那么这个会很有用。 - Wolfgang Fahl

有一个元素，称为按钮，用于填充此目的。 - Lajos Mészáros

当输入用于第三方控件时，例如输入是Infragistics下拉列表的一部分时，这将非常有用：此修复程序可消除只读输入在IE中的闪烁文本。 - katesky8