隐藏文本框闪烁的光标
我有一个文本框有没有办法隐藏闪烁的文本光标？ 我说这是因为我正在做一个恐怖/神秘的网站，其中一个线索就是开始在任何地方打字。
也许我可以用JavaScript做到这一点？
尝试这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title >Text Area with no Carat</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> .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; } </style> <script type="text/javascript"> $(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(); } ); } ); </script> </head> <body> <div class="textarea-wrapper"> <textarea></textarea> </div> </body> </html>
这个想法是在真实的顶部创build第二个不可见的<textarea> 。 用户正在input不可见的内容，但文本不会显示（不是插入符/光标），因为它是不可见的！ 然后使用JavaScript将其值分配给可见的值。
但在IE8中似乎并不奏效：“即使不透明度高达11，插入符仍然可见。
但它在Firefox中起作用…？
基本的想法是，光标的颜色和文字的颜色是一样的。 所以你要做的第一件事是使文本透明，从而把光标带走。 然后，您可以使文本阴影再次使文本可见。
使用这个链接来看它住在jsfiddle 。
input[type="text"]{ color : transparent; text-shadow : 0 0 0 #000; } input[type="text"]:focus{ outline : none; }
更新：
已知不适用于iOS 8和IE 11
我的另一个想法是有点哈克，需要JavaScript。
HTML和CSS部分：
你做2个input字段，并使用z-index等等将一个字段定位在另一个字段的顶部。然后，使顶部input字段完全透明，无焦点，无颜色等。 您需要将可见，较低的input设置为禁用，以便它仅显示上述input的内容，但实际上不起作用。
Javascript部分：
在上述所有之后，您同步两个input。 在按键上或更改时，将较高input的内容复制到较低的input。
总结以上所有内容：您input一个不可见的input，并在提交表单时将其发送到后端，但是每次更新其中的文本都将被回显到较低的可见但禁用的input字段中。
我正在寻找一种方法来隐藏iOS设备上闪烁的光标，用于触发日历的dateinput，因为您可以看到日历select器顶部的光标闪烁。
input:focus { text-indent: -9999em; }
所以在这种情况下，我的CSS工作得很好，显然缺点是如果你需要看看你在键入什么，那么它是不好的
我认为这是一个完美的解决scheme：使input足够宽，右alignment右alignment，从而使光标和内容位于屏幕的外部，而它仍然是可点击的 
不幸的是，你不能用CSSdevise文本光标。 你只能做一些非常糟糕的JavaScript技巧，但根据你的网站的布局和要求，它可能根本不可能。 所以我会build议忘记整个想法。
<input style="position: fixed; top: -1000px">
适用于iOS8。
您可以通过调用焦点事件的模糊function来“隐藏文本框闪烁的光标”
<input type="text" onfocus="this.blur()"/>
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">
只是用@sinfere的想法为我的一个朋友做了一个概念validation：
演示： http : //jsfiddle.net/jkrielaars/y64wjuhj/4/
input的开始是偏移的，所以它落在容器之外（已经隐藏了溢出）实际的字符（和闪烁的光标）将永远不会进入视图。 假div被放置在input字段的下面，所以假div的点击将把焦点设置在不可见的input上。
<div class="container"> <div id="fake" class="fake"> <span class='star empty'></span> <span class='star empty'></span> <span class='star empty'></span> <span class='star empty'></span> </div> <input type="text" id="password" class="invisible" maxlength="4"> </div>
<input type='text' disabled='disabled' />
编辑：
这将禁用有效地删除闪烁光标的文本框..然后我想你可以使用JavaScript来捕捉按键，并更改文本字段的值
document.onkeypress = functionThatChangesValue; if (document.layers) document.captureEvents(event.keypress);
