Question

所以，这是一个设计决定，许多人可能会觉得奇怪。我想隐藏插入符号显示在网页上的文本框中，但我希望文本框保持活动状态。

我很惊讶地发现CSS实际上并没有为自定义插入提供任何功能，不可否认，这是我过去所需要的，但我认为我肯定不会是第一个想做的事情。此

我向你解释我所做的最好的方法是向我展示网站。 www.hududandescape.com

正如您所看到的，我创建了自己的自定义插入符号，它只是在文本框的末尾闪烁，该文本框已经设置为与背景混合。文本框始终保持焦点，因此不存在用户无法输入的风险。

我的问题是文本框附带的插入符号仍在闪烁。我已经在Chrome和Safari中修复了这个问题，方法是在盒子的最末端放一个小黑盒，从而遮盖插入符号。但是这个解决方案并不理想，它在Firefox或IE中不起作用。

您的解决方案，无论多么有创意，都受到欢迎：）

安迪

Answer 1

我不确定，但尝试这样的事情。想法很简单，我想你会理解阅读代码

   <style>
      input#top {
       width:0px;
       border: none;
    }
    #show-input{
       border:1px solid #000;
       width: 100px;
       height: 25px;
    }
  </style>

    <input id='top' /> <!-- 'hidden' -->
    <div id='show-input' ></div> <!-- show input -->
    <script>$(function(){ 
          $("#show-input" ).click(function(){
              $("#top").focus();
          });
          $("#top").keyup(
             function(){ 
               $("#show-input").html($(this).val())
          }) 
    })
    </script>

在HTML文本框中隐藏插入符号

1 个答案: