隐藏文本字段闪烁插入符号

Question

我的 HTML 中有一个文本输入。当输入获得焦点时，有没有办法隐藏闪烁的文本插入符号？

我愿意使用 JavaScript 或 CSS 来实现这一点。

Answer 1

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 2

刚刚使用 @sinfere 的想法为我的一个朋友做了一个概念证明：

demo: http:// /jsfiddle.net/jkrielaars/y64wjuhj/4/

输入的开头是偏移的，因此它落在容器之外（隐藏了溢出）
实际的字符（和闪烁的光标）永远不会进入视图。
假 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>

Answer 3

适用于 iOS8。

Answer 4

将输入设置为只读也会这样做，因为它会阻止焦点，但它可能不适用于许多仍然需要它的用例。

<input type="text" readonly />

Answer 5

您可以通过调用焦点事件上的模糊函数来“隐藏文本字段闪烁光标”

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

Answer 6

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

Answer 7

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

Answer 8

基本思想是，光标的颜色与文本的颜色相同。因此，您要做的第一件事就是使文本透明，从而将光标移开。然后，您可以使用文本阴影使文本再次可见。

使用此链接可在 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 部分：

您创建 2 个输入字段，并使用 z-index 等将一个输入字段精确地放置在另一个输入字段的顶部。然后，您使顶部输入字段完全透明，没有焦点，没有颜色，并且一样。
您需要将可见的、较低的输入设置为禁用，这样它只显示上面输入的内容，但实际上不起作用。

Javascript部分：

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

总结以上所有内容：您输入一个不可见的输入，该输入将在提交表单时发送到后端，但其中文本的每次更新都将回显到下方可见但禁用的输入字段中。

Answer 9

插入符号颜色：透明！重要; 适用于较新的浏览器

Answer 10

试试这个：

$(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>

这个想法是在真实区域之上创建第二个不可见的 </code>。用户正在输入不可见的文本，但文本没有出现（也没有插入符号/光标），因为它是不可见的！然后，您可以使用 JavaScript 将其值分配给可见值。

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

但它在 Firefox 中起作用...？

Answer 11

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

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

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