web-dev-qa-db-ja.com

CSSを使用してテキストボックスを無効にする

CSSでテキストボックスを無効にする方法は？現在、モデル内のプロパティに応じて有効/無効にできるテキストボックスがビューにあります。 asp.net MVCビューがあります。 Modelプロパティの値に応じて、テキストボックスまたは読み取り専用のテキストボックスをレンダリングする必要があります。ビューコントロールにCSSを適用してこれを行うことを考えていました。誰かが以前にこれをやったことがありますか？

csstextbox
55
Balaji

CSSはテキストボックスを無効にすることはできませんが、表示または表示をオフにすることはできます。

display: none;
visibility: hidden;

または、HTMLattributeを設定することもできます。

disabled="disabled"
53
Dustin Laine

あなたはCSS経由で無効にすることができます：

pointer-events: none;

どこでも動作しません。

54
abbie

CSSで何かを無効にすることはできません。これは機能上の問題です。 CSSは設計の問題を対象としています。ウォッシュアウトカラーを設定することで、テキストボックスが無効になっているような印象を与えることができます。

実際に要素を無効にするには、無効なブール属性を使用する必要があります：

<input type="text" name="lname" disabled />

デモ： http://jsfiddle.net/p6rja/

または、必要に応じて、JavaScriptでこれを設定できます。

document.forms['formName']['inputName'].disabled = true;​​​​

デモ： http://jsfiddle.net/655Su/

無効な入力は、サーバーにデータをポストバックするときに値を通過させないことに注意してください。データを保持したいが、直接編集することを許可しない場合は、代わりにreadonlyに設定することができます。

// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;

デモ： http://jsfiddle.net/655Su/1/

これは要素のUIを変更しないので、自分でそれを行う必要があります。

input[readonly] { 
    background: #CCC; 
    color: #333; 
    border: 1px solid #666 
}

無効な要素をターゲットにすることもできます。

input[disabled] { /* styles */ }
53
Sampson

CSSでテキストボックスを無効にすることはできません。無効にすることはプレゼンテーションタスクではありません。disabled属性を使用してHTMLマークアップでこれを行う必要があります。

Z-indexを使用して絶対位置に配置された透明要素の下にテキストボックスを配置すると、何かをまとめることができる場合があります。しかし、それは馬鹿げています。

ただし、CSSでstyle無効なテキストボックス（もしそうであれば）を使用できます。

input[disabled] { ... }

iE7以降および他のすべての主要なブラウザで。

7
Pekka 웃

ペッカの答えをさらに進めると、テキストボックスのいくつかにスタイル「style1」がありました。 「style1 [無効]」を作成して、「style1」スタイルを使用して無効なテキストボックスのみをスタイルできます。

.style1[disabled] { ... }

IE8で問題なく動作しました。

3
GBU

**このコードをコピーして貼り付けて実行すると、テキストボックスが無効になっていることがわかります**

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title> 

<style>.container{float:left;width:200px;height:25px;position:relative;}
       .container input{float:left;width:200px;height:25px;}
       .overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;} 
</style>
 </head>
<body>
      <div class="container">
       <input type="text" value="[email protected]" />
       <div class="overlay">
        </div>
       </div> 
</body>
</html>
3
ravi tom

これを試してみてください。

<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>

これにより、TextBox内に文字を入力できなくなります。

1
Arun Banik

別の方法は、読み取り専用にすることです

0
silentwarrior

簡潔な答え

いいえ、CSSを使用してテキストボックスを無効にすることはできません。

長い答え

pointer-events: noneは動作しますが、IEではCSSプロパティはIE 11以上でのみ動作するため、すべてのブラウザーで動作しません。それ以外は、CSSを使用してテキストボックスを無効にすることはできません。

ただし、次のようにHTMLのテキストボックスを無効にできます。

<input value="...." readonly />

ただし、テキストボックスがフォーム内にあり、テキストボックスの値を送信しないようにする場合は、代わりにこれを実行します。

<input value="...." disabled />

したがって、テキストボックスを無効にするためのこれら2つのオプションの違いは、disabledではinputテキストボックスの値を送信できないが、readonlyでは許可されることです。

これら2つの違いの詳細については、 "disabled="disabled"とreadonly="readonly" の違いをご覧ください。

0
zixuan