Html 隐藏文本字段闪烁的光标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3671141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide textfield blinking cursor
提问by test
I have a textfield is there a way to hide the blinking text cursor? I say this because I am doing a horror/mystery website and one of the clues is to start typing anywhere.
我有一个文本字段，有没有办法隐藏闪烁的文本光标？我这么说是因为我正在做一个恐怖/神秘的网站，其中一个线索是开始在任何地方打字。
Maybe I can do it with javascript?
也许我可以用javascript来做？
采纳答案by Richard JP Le Guen
Try this:
尝试这个：
$(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>The idea is to create a second, invisible <textarea>over/on-top-of the real one. The user is typing in the invisible one but the text doesn't appear (nor the caret/cursor) as it is invisible! You then use JavaScript to assign its value to the visible one.
这个想法是<textarea>在真实的之上/之上创建第二个不可见的。用户正在输入不可见的文本，但文本没有出现（也没有插入符号/光标），因为它是不可见的！然后使用 JavaScript 将其值分配给可见值。
But it doesn't seem to work in IE8 :'( the caret is still visible even though the opacity is cranked up to 11.
但它似乎在 IE8 中不起作用 :'( 即使不透明度提高到 11，插入符号仍然可见。
But it works in Firefox... ?
但它适用于 Firefox... ？
回答by Lajos Meszaros
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.
基本思想是，光标的颜色与文本的颜色相同。因此，您要做的第一件事是使文本透明，从而将光标带走。然后，您可以使用文本阴影再次使文本可见。
Use this link to see it live in jsfiddle.
使用此链接在jsfiddle 中查看它。
input[type="text"]{
color : transparent;
text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
outline : none;
}
Update:
更新：
Known to not work in iOS 8and IE 11
已知不适用于iOS 8和IE 11
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 cdeutsch
caret-color: transparent !important;works in newer browsers
caret-color: transparent !important;适用于较新的浏览器
回答by Slavo
I was looking for a way to hide the blinking cursor on iOS devices for date inputs that trigger a calendar, because you could see the cursor blinking on top of the calendar picker.
我正在寻找一种方法来隐藏 iOS 设备上闪烁的光标以触发日历的日期输入，因为您可以看到光标在日历选择器的顶部闪烁。
input:focus { text-indent: -9999em; }
So in this case my CSS works nicely, obviously the downside is that if you need to see what you are typing then it is not good
所以在这种情况下，我的 CSS 工作得很好，显然缺点是如果你需要查看你正在输入的内容，那就不好了
回答by sinfere
I think this is a perfect solution:
make the input wide enough, align right to screen right, thus make cursor and content locate at the outside of the screen, while it's still clickable
我认为这是一个完美的解决方案：使输入足够宽，右对齐屏幕右，从而使光标和内容位于屏幕外部，同时它仍然可以点击
回答by 2ndkauboy
Unfortunately you can not style the text cursor with CSS. You can only do some very bad JavaScript tricks but depending on the layout and requirements of your website, it might not be possible at all. So I would recommend to forget the whole idea.
不幸的是，您无法使用 CSS 设置文本光标的样式。你只能做一些非常糟糕的 JavaScript 技巧，但根据你网站的布局和要求，它可能根本不可能。所以我建议忘记整个想法。
回答by Daiwei
<input style="position: fixed; top: -1000px">
<input style="position: fixed; top: -1000px">
Works in iOS8.
适用于iOS8。
回答by coder
you can "Hide textfield blinking cursor" by calling blur function on focus event
您可以通过在焦点事件上调用模糊函数来“隐藏文本字段闪烁的光标”
<input type="text" onfocus="this.blur()"/>
回答by Silvester Wennekers
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">You can use the function for each element jou want no cursor for.
您可以为每个不需要光标的元素使用该功能。
回答by JasperZelf
just made a proof of concept for a friend of mine, using @sinfere 's idea:
刚刚使用 @sinfere 的想法为我的一个朋友做了一个概念证明：
demo: http://jsfiddle.net/jkrielaars/y64wjuhj/4/
演示：http: //jsfiddle.net/jkrielaars/y64wjuhj/4/
The start of the input is offset so it falls outside of the container (which has overflow hidden) The actual caracters (and blinking cursor) wil never enter into view. The fake div is placed below the input field so a tap on the fake div will set focus on the invisible input.
输入的开始是偏移的，所以它落在容器之外（它隐藏了溢出）实际的字符（和闪烁的光标）永远不会进入视图。假 div 位于输入字段下方，因此点击假 div 会将焦点设置在不可见的输入上。
<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>
