web-dev-qa-db-ja.com

CSSからTextareaを無効にする

Textarea（またはその他の入力要素）を無効にするには、次の方法があります。

  • HTMLでは、次のように書くことができます：_<textarea id='mytextarea' disabled></textarea>_

  • JQueryから、次のことができます：$("#mytextarea").attr("disabled","disabled");

  • CSS？ CSSでtextareaを無効にすることは可能ですか？

htmlcssinputtextarea
21
bArmageddon

テキストエリアを無効にして表示することはできますが、実際に無効にすることはできません。

JavaScriptを使用すると、HTML disabled属性によって設定された同じDOM属性を変更するだけなので、HTMLとJavaScriptを使用して本質的に同じことを実行します。ただし、CSSは、DOMの操作を一切行わないため、この図から完全に外れています。CSSが制御するのは、要素の外観ではなく、要素の外観であり、動作ではありません。

25
BoltClock

プロジェクトには、textareaといくつかのボタンが入ったコンテナーがあります。すべてを無効にするには、次のコードを使用してクラスを追加します。

.disabled {
  opacity: 0.3;
}
.disabled:after {
    width: 100%;
    height: 100%;
    position: absolute; 
}

<div class="disabled">
    <textarea></textarea>
    <!-- textarea, buttons and other input elements -->
</div>

不透明度はショーのみですが、：after要素が処理を行います。コンテナ内のすべての要素は、クリックやマウスオーバーに反応しなくなりました（ただし、タブでそれらに到達することはできます）。私のニーズと私の場合、これはうまく機能し、CSSハックが簡単です。

9
Fabian

CSSはスタイルを扱います。要素の無効化は機能します。

もちろん、CSSはトランジションのようなものでより機能的になり、それはより灰色の領域です。しかし、CSSの目的はスタイルとして保持することであり、要素の機能制御を制御することではありません。

いいえ、cssは要素を無効にすることはできません。

無効にされたコントロールを "偽造"して、視覚的に無効に見えるようにスタイルを設定できます。

7
jmbertucci
 <textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"></textarea>

CSSで要素を完全にクリックできないようにすることができます：point-events: none;

textarea {
  pointer-events: none;
  border: 1px solid #eee;
  padding: 20px;
}
<textarea placeholder="This is a textarea, and it is not clickable"></textarea>
6
Malte Schulze-Boeing

いいえ、CSSでは実行できません。ただし、CSSで入力を「無効」にスタイル設定し、HTMLコードでプロパティmaxlength = "0"を使用して、ユーザーが入力できないようにすることができます。また、ポインターのスタイルを正しいものに変更して、ボックスに書き込むように指示するポインターが表示されないようにしてください。

3
David Bélanger

残念ながら純粋なCSSでは不可能です。Javascriptを使用する必要があります。

1
Paul Grimshaw

これがハックです。

<textArea class="tailLog">This page is waiting for something.</textArea>

<script type="text/javascript">
    $(document).ready(  function(){
            $(".tailLog").off().on("keydown", function(event){
                event.preventDefault();
                return;
            });
     });
</script>

それが機能する方法はこれです。ユーザーが何かを入力しようとするたびに、jqueryを使用してイベントをキャッチします。次に、イベントにデフォルトの動作をさせたくないことを伝えます。私が言うようにそれはハックですが、それはピンチで効果的なものです。

1
Jalkin

上記の回答「残念ながら純粋なCSSでは不可能」に同意します。ただし、親要素のポインターイベントを何も作成できない場合は、機能しますが、要素の検査から元に戻すことができます。

<div class="disabled">
 <textarea></textarea>
 <!-- textarea, buttons and other input elements -->
</div>

.disabled {
  pointer-events: none;;
}
0
Mujtaba Haroon