Question

我有一个文本字段有没有办法隐藏闪烁的文本光标？我这样说是因为我正在做一个恐怖/神秘的网站，其中一条线索就是开始在任何地方打字。

也许我可以用javascript做到这一点？

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

Javascript部分：

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

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

Answer 2

caret-color: transparent !important;适用于较新的浏览器

Answer 3

试试这个：

$(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> over / on-top。用户正在键入不可见的文本，但文本不会出现（也不是插入符/光标），因为它是不可见的！然后使用JavaScript将其值分配给可见的值。

但它似乎在IE8中不起作用：'（即使不透明度达到11，插入符号仍然可见。

但它适用于Firefox ......？

Answer 4

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

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

所以在这种情况下我的CSS工作得很好，显然缺点是如果你需要看看你输入的内容那么它就不好了

Answer 5

不幸的是，您无法使用CSS设置文本光标的样式。您只能做一些非常糟糕的JavaScript技巧，但根据您网站的布局和要求，可能根本不可能。所以我建议忘记整个想法。

Answer 6

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

适用于iOS8。

Answer 7

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">

您可以为每个元素使用该功能，而不需要光标。

Answer 8

将输入设置为readonly也是这样做的，因为它可以防止聚焦，但可能不适用于仍然需要聚焦的许多用例。

<input type="text" readonly />

Answer 9

您可以通过在焦点事件上调用模糊功能<隐藏光标来隐藏文字

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

隐藏文本字段闪烁光标

9 个答案: