web-dev-qa-db-ja.com

CSSを使用して入力フィールドを読み取り専用にすることは可能ですか？

入力要素はreadonlyブール属性を適用することで読み取り専用になり、CSSの影響を受けない属性であることを知っています。

一方、私のシナリオはCSSに非常に適しているように思えるので、CSSのトリックを使ってそれを実行できることを望んでいました。フォームに印刷可能バージョンハイパーリンクがあります。クリックすると、ドキュメントの印刷可能なバージョンが表示されます。それはほとんどCSSのもので、print.cssは次のようになります。

html.print {
    width: 8.57in;
}

.print body {
    font: 9pt/1.5 Arial, sans-serif;
    margin: 0 1in;
    overflow: auto;
}

.print #header, .print #footer {
    display: none;
}

.print .content {
    background-color: white;
    overflow: auto;
}

.print .fieldset > div.legend:first-child {
    background: white;
}

.print ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}

.print :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}

.print ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}

.print :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}

.print .check-mark {
    display: inline;
}

.print input[type=checkbox] {
    display: none;
}

.print .boolean-false {
    display: none;
}

次のようないくつかのjavascriptピースもあります。

  • printクラスをhtml要素に追加する
  • スクロールバーなしで表を表示する
  • ポップアップオーバーレイの非表示など、その他のいくつかの小さなこと。

私の現在の問題は入力フィールドです。読み取り専用である必要がありますが、コードへの最小限の変更でそれを行う方法はわかりません。 CSSは完璧なソリューションになる可能性があります。

何か案は？

javascripthtmlcsscss3printing
37
mark

CSSのみで？これは、テキスト入力で user-select:none を使用することで可能です。

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

JSFiddleの例 .

これは CSS3をサポートしない、またはuser-selectプロパティをサポートしないブラウザー では機能しないことに注意してください。 readonlyプロパティは、理想的には読み取り専用にしたい入力マークアップに指定する必要がありますが、これはCSSの代替手段として機能します。

JavaScriptを使用：

document.getElementById("myReadonlyInput").setAttribute("readonly", "true");

Edit：CSSメソッドはChrome（29）。で機能しなくなりました。-webkit-user-selectプロパティが表示されます。入力要素では無視されます。

31
James Donnelly

（現在のブラウザでは）入力フィールドをCSSのみで読み取り専用にすることはできません。

ただし、既に述べたように、属性readonly='readonly'。

主な基準がソースのマークアップを変更しないことである場合、JavaScriptを使用して控えめにこれを取得する方法があります。

JQueryを使用すると、これは簡単です。

 $('input').attr('readonly', true);

または、プレーンなJavaScriptでも：

document.getElementById('someId').setAttribute('readonly', 'readonly');
11
Faust

本当に必要なものではありませんが、達成したいものに応じて、ここで質問を助け、答えることができます。

CSSプロパティを使用して、すべてのポインターイベントが入力に送信されないようにすることができます：pointer-events:noneエレメントの最上部にレイヤーを追加して、クリックできないようにします... cursor:text入力にテキストカーソルスタイルを返す親要素に...

たとえば、モジュールのJS/HTMLを変更できず、cssでカスタマイズできる場合に便利です。

[〜＃〜] jsfiddle [〜＃〜]

7
Cétia

HTMLのread-only属性は、編集不可のテキスト入力を作成するために使用されます。ただし、CSSの場合、pointer-eventsプロパティを使用して、ポインターイベントを停止します。

構文：

pointer-events: none;

例：この例は、2つの入力テキストを示しています。1つは編集不可です。

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            Disable Text Input field 
        </title> 

        <style> 
        .inputClass { 
            pointer-events: none; 
        } 
        </style> 
    </head> 

    <body style = "text-align:center;">
        Non-editable:<input class="inputClass" name="input" value="NonEditable"> 

        <br><br> 

        Editable:<input name="input" value="Editable"> 
    </body> 
</html>

Edit static

2
Jee Mok

これはcssでは不可能ですが、私のWebサイトの1つで1つのcssトリックを使用しました。これが機能するかどうかを確認してください。

トリックは、入力ボックスをdivでラップし、それを相対的なものにし、div内に透明な画像を配置し、入力テキストボックス上に絶対画像を作成して、誰も編集できないようにすることです。

css

.txtBox{
    width:250px;
    height:25px;
    position:relative;
}
.txtBox input{
    width:250px;
    height:25px;
}
.txtBox img{
    position:absolute;
    top:0;
    left:0
}

html

<div class="txtBox">
<input name="" type="text" value="Text Box" />
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" width="250" height="25" alt="" />
</div>

jsFiddle File

2
Roy Sonasish

CSSを介してコントロールの動作を設定するのではなく、スタイルのみを設定します。jqueryまたは単純なjavascriptを使用して、フィールドのプロパティを変更できます。

0
sAnS

入力要素を非表示にして、同じコンテンツのラベル要素に置き換えてみませんか？

React TODOMVCアプリがこの同じことをどのように達成したか、これが彼らが思いついた戦略です。

動作を確認するには、以下のアプリをチェックして、TODOアイテムをダブルクリックしてからクリックして離れるときに、TODOアイテムのCSSプロパティを見てください。

http://todomvc.com/examples/react-backbone/#/

ページをレンダリングするとき、編集可能な入力、またはdisplay：noneのある編集不可能なラベルを使用できます。メディアクエリによって異なります。

0
Ian Danforth

CSSで動作を設定することはできません。 CSSで何かを無効にする唯一の方法は、display:noneまたは単に透明なimgを含むdivを全体に配置し、zオーダーを変更して、ユーザーがマウスでフォーカスすることを無効にします。それでも、ユーザーは別のフィールドのタブを使用して焦点を合わせることができます。

0
David Jashi