Aktivieren der Textauswahl für deaktivierte Eingaben

Ich habe ein großes Formular mit vielen Eingabeelementen, die nicht bearbeitet werden können, bis ein Benutzer auf eine Schaltfläche klickt, aber die Textauswahl zum Kopieren von Werten in andere Formulare zulassen muss.Aktivieren der Textauswahl für deaktivierte Eingaben

Meine bisherige Lösung bestand darin, die Eingaben in ein deaktiviertes Feld zu verpacken, was bis zur neuesten Chrome-Version funktionierte, die keine Textauswahl für deaktivierte Eingaben zulässt.

Für andere Fragen wurde das Attribut readonly vorgeschlagen, es wird jedoch nicht für Feldgruppen unterstützt, sodass es nicht auf untergeordnete Elemente kaskadiert (siehe Code-Snippet).

Irgendwelche Vorschläge, oder werde ich fest, Hinzufügen readonly zu jedem Eingabeelement? Ich benutze auch AngularJS, also wenn es eine eckige Lösung gibt, die auch funktionieren kann.

EDIT: Ich sollte beachten, dass ich überlegt habe mit ngReadonly (derzeit mit ngDisabled auf dem fieldset) aber ngReadonly funktioniert nicht auf Feldgruppen und müsste zu mehreren hundert Eingaben in meiner Anwendung hinzugefügt werden.


          
   
    
    <html> 
 
<body> 
 
    <fieldset disabled> 
 
    <input value="I am disabled by my parent" /> 
 
    </fieldset> 
 

 
    <fieldset readonly> 
 
    <input value="I am readonly" readonly/> 
 
    <input value="I am not readonly, despite my parent" /> 
 
    </fieldset> 
 
</body> 
 
</html>

Quelle

2016-11-01 Adam Axtmann

und wenn Sie eine Richtlinie erstellen, die alle Kinder des Elements abdeckt und hinzugefügt, um die Nur-Lese-Eigenschaft –

Da Sie AngularJS verwenden, könnte man denken, so etwas wie:

<html> 
<body> 
    <fieldset disabled> 
    <input value="I am disabled by my parent" /> 
    </fieldset> 

    <fieldset> 
    <input value="I am readonly" {{Shold_Be_Readonly_or_Not}}/> 
    ... 
    </fieldset> 
</body> 
</html>

und in der Steuerung setzen $scope.Shold_Be_Readonly_or_Not entweder als readonly oder eine leere Zeichenfolge.

Quelle

2016-11-01 14:11:47 FDavidov

Angular ngReadonly hat, die dies im Wesentlichen der Fall ist. Ich möchte es jedoch vermeiden, dass wir es benötigen, da das zu mehreren hundert Eingaben in meiner Anwendung hinzugefügt werden müsste. –

@AdamAxtmann, natürlich habe ich über ngReadonly vergessen. Egal, welche Lösung Sie finden, Sie müssen (zumindest) alle Ihre mehreren hundert Eingabefelder aufsuchen (entweder um zu überprüfen, ob die Logik OK ist oder um kleine Änderungen vorzunehmen). – FDavidov

Vielleicht so etwas wie dies würde genügen ..

Dies könnte nicht sehr Winkel denken sein, aber es ermöglicht es Ihnen, die bestehende Struktur zu halten.

angular.element(document.querySelectorAll("fieldset[readonly]")).children('input').attr('readonly','readonly');

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> 
 
<html> 
 
<body> 
 
    <fieldset disabled> 
 
    <input value="I am disabled by my parent" /> 
 
    </fieldset> 
 

 
    <fieldset readonly> 
 
    <input value="I am readonly" readonly/> 
 
    <input value="I am not readonly, despite my parent" /> 
 
    </fieldset> 
 
</body> 
 
</html>

Quelle

2016-11-01 14:28:28 Mackan

Aktivieren der Textauswahl für deaktivierte Eingaben

Antwort

Verwandte Themen