it-swarm.com.de

Ist es möglich, Eingabefelder über CSS schreibgeschützt zu machen?

Ich weiß, dass Eingabeelemente durch Anwenden des booleschen Attributs readonly schreibgeschützt werden. Da es sich hierbei um ein Attribut handelt, ist es nicht von CSS betroffen.

Auf der anderen Seite scheint mein Szenario sehr gut für CSS zu passen, also hoffte ich, dass es eine Art CSS-Trick gibt, mit dem ich das tun kann. Ich habe eine druckbare Version Hyperlink in meinem Formular. Wenn Sie darauf klicken, wird eine ... druckbare Version des Dokuments angezeigt. Es ist meistens CSS-Material, meine print.css sieht folgendermaßen aus:

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;
}

Es gibt auch einige Javascript-Teile, wie zum Beispiel:

  • Hinzufügen der print-Klasse zum HTML-Element
  • Tabellen ohne Bildlaufleisten anzeigen
  • Einige andere kleinere Dinge, wie das Ausblenden von Popup-Überlagerungen.

Mein aktuelles Problem sind Eingabefelder. Sie sollten schreibgeschützt sein, ich habe jedoch keine Ahnung, wie dies mit minimalen Änderungen am Code geschehen soll. CSS könnte eine perfekte Lösung sein.

Irgendwelche Ideen?

32
mark

Nur mit CSS? Dies ist bei Texteingaben mit user-select:none möglich:

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

JSFiddle-Beispiel .

Es ist erwähnenswert, dass dies nicht in Browsern funktioniert, die kein CSS3 oder die user-select-Eigenschaft unterstützen. Die readonly-Eigenschaft sollte idealerweise für das Eingabe-Markup angegeben werden, das nur gelesen werden soll. Dies funktioniert jedoch als hackige CSS-Alternative.

Mit JavaScript:

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

Edit: Die CSS-Methode funktioniert in Chrome nicht mehr (29). Die -webkit-user-select-Eigenschaft wird jetzt bei Eingabeelementen ignoriert.

30
James Donnelly

Es ist (mit aktuellen Browsern) nicht möglich, ein Eingabefeld nur durch CSS schreibgeschützt zu machen. 

Wie bereits erwähnt, können Sie das Attribut readonly='readonly' anwenden.

Wenn das Hauptkriterium darin besteht, das Markup in der Quelle nicht zu ändern, gibt es Möglichkeiten, dies unauffällig mit Javascript zu erreichen.

Mit jQuery ist das einfach:

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

Oder auch mit einfachem Javascript:

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

Nicht wirklich, was Sie brauchen, aber es kann helfen und die Frage beantworten, je nachdem, was Sie erreichen möchten.

Sie können verhindern, dass alle Zeigerereignisse an die Eingabe gesendet werden, indem Sie die CSS-Eigenschaft verwenden: pointer-events:none Dadurch wird eine Art Ebene über dem Element hinzugefügt, durch die Sie nicht darauf klicken können Fügen Sie dem übergeordneten Element auch einen cursor:text hinzu, um der Eingabe den Textcursor-Stil zurückzugeben ...

Zum Beispiel, wenn Sie den JS/HTML-Code eines Moduls nicht ändern können. Sie können ihn einfach per css anpassen.

JSFIDDLE

7
Cétia

Das Attribut read-only In HTML wird verwendet, um eine Texteingabe zu erstellen, die nicht bearbeitet werden kann. Bei CSS wird die Eigenschaft pointer-events Verwendet, um die Zeigerereignisse zu stoppen.

Syntax:

pointer-events: none;

Beispiel: Dieses Beispiel zeigt zwei Eingabetexte, von denen einer nicht editierbar ist.

<!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

Dies ist mit css nicht möglich, aber ich habe einen CSS-Trick in einer meiner Website verwendet. Bitte überprüfen Sie, ob dies für Sie funktioniert.

Der Trick ist: Umhüllen Sie das Eingabefeld mit einem div und machen Sie es relativ, platzieren Sie ein transparentes Bild innerhalb des div und machen Sie es absolut über dem Eingabetextfeld, sodass niemand es bearbeiten kann.

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-Datei

2
Roy Sonasish

Sie legen das Verhalten von Steuerelementen nicht über CSS fest, sondern nur deren Stil. Sie können jquery oder einfach javascript verwenden, um die Eigenschaften der Felder zu ändern.

0
sAnS

Warum nicht das Eingabeelement ausblenden und durch ein Labelelement mit demselben Inhalt ersetzen?

Ich wunderte mich darüber, wie die React TODOMVC-App dasselbe erreicht hat und dies war die Strategie, die sie entwickelten.

Um es in Aktion zu sehen, checken Sie die App unten aus und beobachten Sie die CSS-Eigenschaften der TODO-Elemente, wenn Sie auf sie doppelklicken und dann weg klicken.

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

Wenn Sie die Seite rendern, können Sie entweder eine bearbeitbare Eingabe oder eine nicht bearbeitbare Beschriftung mit Anzeige verwenden: none; abhängig von Ihrer Medienanfrage.

0
Ian Danforth

Kein Verhalten kann von CSS festgelegt werden. Die einzige Möglichkeit, etwas in CSS zu deaktivieren, besteht darin, es unsichtbar zu machen, indem Sie entweder display:none setzen oder div einfach mit transparent img über das ganze Feld setzen und ihre Z-Reihenfolge ändern, um den Benutzer mit der Maus darauf zu konzentrieren. Der Benutzer kann sich jedoch weiterhin mit der Registerkarte aus einem anderen Feld konzentrieren.

0
David Jashi