隐藏文本字段闪烁光标

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部分:

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

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

Answer 2

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

Answer 3

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

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

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

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>真实的第二个,不可见的顶部/顶部.用户正在键入不可见的文本,但文本不会出现(也不是插入符号/光标),因为它是不可见的!然后使用JavaScript将其值分配给可见的值.

但它似乎在IE8中不起作用:'(即使不透明度达到11,但插入符号仍然可见.

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

Answer 5

我认为这是一个完美的解决方案:使输入足够宽,向右对齐屏幕,从而使光标和内容位于屏幕外部,同时仍可点击