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 に答える