0

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

我惊讶地发现 CSS 实际上并没有为自定义插入符号提供任何功能，诚然，我过去从未需要过任何功能，但我认为我肯定不会是第一个想要这样做的人。

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

如您所见，我创建了自己的自定义插入符号，它只是在文本框的末尾闪烁，该文本框的样式与背景融为一体。文本框始终保持焦点，因此不存在用户无法输入的风险。

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

您的解决方案，无论多么有创意，都非常受欢迎:)

安迪

4

1 回答 1

0

我不确定，但试试这样的。想法很简单，我想你会明白阅读代码

   <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>
于 2012-12-02T16:47:23.183 回答