12

シンプルなテキストエリアがあり、テキストキャレットを表示しながら透明な文字を作成する必要があります。次のルールを適用すると、キャレットが見えなくなります。

textarea {
   background: transparent;
   opacity: 0;
}

目に見えないテキストを入力するときは、テキスト キャレットの動きを確認する必要があります。

編集:テーブル内の td セルを編集するには、エディターを作成する必要があります。セルをクリックすると、テキストエリアが表示され、入力が開始されます。文字ごとに、コンテキストをセルに挿入します。その後、テキストエリアを非表示にします。

4

4 に答える 4

7

このjsFiddle DEMOは、透明なテキストと共に非ネイティブ を作成するために若干変更されたオンライン チュートリアル メソッドを使用します。browser text-caret

また、私が作成したこのjsFiddle New Methodは、その目標を別の方法で処理しますが、IE8 フレンドリーではありません。

ステータスの更新: 上記の jsFiddle DEMO を次の新しいバージョン

jsFiddle より新しい新しいメソッド!!

上記の jsFiddle バージョンでは、テキスト領域の内側をクリックできるようになり、キャレットはクリックされた場所を尊重します。この追加機能は、すばらしい質問と回答によって可能になりました。

于 2012-07-17T06:05:46.407 に答える
4

0.02 ドルを投入する時が来ました。

これは、私が理解しているように、うまくいくという質問に対する答えです。迅速で汚いので、お気軽に提案してください。このコードはテストされていませんが、ここで動作するフィドルを作成しました: http://jsfiddle.net/66RXc/

<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--


function call(val) {
    document.getElementById('result').value += val.charAt(val.length - 1);


    document.getElementById('result').value = 
        document.getElementById('result').value.substr(0, val.length);


    document.getElementById('test').value = 
        document.getElementById('test').value.replace(/[^\^]/g, ' ');

}​
-->
</script>
</head>
<body>

<textarea name="textarea" cols="20" rows="5" id="test"
 onKeyUp="call(this.value);"></textarea>

<textarea style="display:block" cols="20" rows="5" id="result" disabled>
</textarea>​

</body>
</html>

私がアプローチした方法は、テキストエリア「テスト」に文字が入力されるたびに、それを非表示のテキストボックスにコピーし、^ を除く「テスト」内のすべての文字をスペースに置き換えることでした。文字は隠されていますが、カラットはそのままです。全文はまだ別のボックスにあります。display:block の代わりに display:hidden を使用して非表示にすることができます。

これは世界で最高の実装ではありません。私がすぐに実行したことです。それが機能するためには、ある種の遅い (~15-20 WPM) を入力する必要があります。

于 2012-07-23T19:59:37.020 に答える
2

テキスト自体を透明にするための CSS3 ソリューションを次に示します。

color: rgba(0,0,0,0);テキストの色属性を設定します

唯一の問題は、キャレットが見えなくなることです。簡単な検索を行ったところ、キャレットとそのスタイリングは完全にブラウザーで自由に使用できることがわかりました。そのため、私が考えることができる唯一のオプションは、Javascript を使用してシミュレートされたキャレットを入力内容の最後に追加することです。

私はこれを行う方法のアイデアを持っていますが、それは面倒であり、理想的とは言えません.

  1. ページに非表示のラベルを追加する
    • 隠されていることを確認してくださいdisplay: none;（実際の幅になるように）
    • white-space: nowrap;すべてを1行に保持するように設定します）
    • テキストがテキストエリアのテキストとまったく同じスタイルであることを確認してください
  2. <span id="caret">|</span>textarea の直前に 要素を追加します(仕様の残りの部分では、これをキャレットと呼びます)
    • その位置をに設定しますposition: relative;
    • z-index を増やしてオーバーレイにします
    • 実際のキャレットの最初の位置がどこにあるかの上に設定するために右にシフトします
  3. テキストエリアの値を取り込み、キャレットの位置に対してテキストエリアの幅をチェックする関数を作成します (これを行う方法がわからない場合は、selectionStart を参照してください)。
    • ここでの問題は、文字が常に同じ長さであるとは限らず、他のフォントの対応する文字と常に同じ長さではないことです
    • これを解決するには、テキストがテキストエリアに入力されると、ステップ 1 で作成した非表示のラベルでそれを模倣する必要があります。
      • テキストエリアの先頭からキャレットの現在の位置までのテキストのみを模倣する
      • 各文字 (スペースを含む) を独自のスパンでラップする
    • 次に、関数を呼び出して、ラベルの幅とテキストエリアの幅を比較する必要があります
      • ラベルの幅がテキストエリアよりも小さい場合は、非表示のラベルの最後のスパンの幅を取得し、キャレットをその幅だけ右にシフトしてから、手順 4 に進みます。
        • これは、テキストが入力されると実行される関数であるため、一度に 1 文字ずつ実行されます。
        • ここで、キャレットが最後または最後に近い位置にあるときに、キャレットがテキストエリアの外に出ないように注意してください
      • ラベルがテキストエリアより広い場合:
        • テキストエリアの幅に達するまで、ラベルの文字 (スパン) の幅を一度に 1 つずつ追加します。
        • キャレットの位置をフォントの高さだけ下に移動し、水平の開始位置に戻します (キャレットの位置は相対的であるため、左の位置を元の位置に戻すだけです)。(0 + offsetToACTUALCaretPosition)
        • フラグ (例: ) を使用class="break"して、前の行の最後のスパン (文字) をマークします
        • 幅比較関数を再度呼び出します
          • 各「行」の最後に追加したフラグをチェックする条件が含まれていることを確認してください (存在する場合)。
  4. まだ行っていない場合は、必要な CSS スタイルをキャレット スパンに適用し、テキストエリアのテキストの色を次のように変更します。color: rgba(0,0,0,0);

警告:

  • これは、実行する小さなジョブに対して多くのオーバーヘッドが発生します
  • パディングを考慮してこのメ​​ソッドを調整する必要があります
  • このメソッドを調整して、文字を削除し、キャレットを前の位置 (左) に移動するためのサポートを追加する必要があります。
  • テキストエリアをスクロール可能のままにしておく場合は、そのサポートを追加する必要があります（同様の設定、テキストがスクロールしたり、画面から/テキストエリアの可視領域の外に移動したりする静的な高さなど）

前に言ったように、この解決策が非常に大まかであることはわかっていますが、誰かがより良い解決策を考え出すのに役立つかもしれません.

幸運を！

于 2012-07-29T04:28:48.760 に答える
-4

あなたの編集に基づいて、テキストエリアを非表示にする必要がある場合は、なぜjQueryを使用しないのですか$('#your_id').hide();

于 2012-07-17T06:12:33.023 に答える