無効な入力でテキスト選択を有効にする

ユーザーがボタンをクリックしてから値を他のフォームにコピーするためのテキスト選択を許可するまで、編集不可能な入力要素が多い大きなフォームがあります。無効な入力でテキスト選択を有効にする

私の既存の解決策は、無効なフィールドセットに入力をラップすることでした。これは無効な入力に対してテキスト選択を許可しない最新のChromeリリースまで機能しました。

他の質問にはreadonly属性がありますが、フィールドセットではサポートされていないため、子要素にカスケードしません（コードスニペット参照）。

提案がありますか、またはすべての入力要素に読み取り専用を追加していませんか？私もAngularJSを使用していますので、同様に機能するかもしれない角度のある解決策がある場合は、

EDIT：ngReadonly（現時点ではフィールドセットでngDisabledを使用しています）が考慮されていますが、ngReadonlyはフィールドセットでは機能せず、アプリケーション全体で数百の入力に追加する必要があります。


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

出典

2016-11-01 Adam Axtmann

、あなたは要素のすべての子をカバーし、 –

あなたはAngularJSを使用しているので、あなたがこのような何かを考えることができます：

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

とコントローラ内、readonlyまたは空の文字列のいずれかとし$scope.Shold_Be_Readonly_or_Notを設定します。

出典

2016-11-01 14:11:47 FDavidov

角度は、本質的にこれを行いngReadonlyを持っている読み取り専用プロパティを追加したポリシーを作成する場合。私はそれを私達のアプリケーションの向こう側にある数百の入力に加える必要があるので、私たちにそれを持っていることを避けたいと思います。 –

@AdamAxtmannもちろん、私はngReadonlyについて忘れてしまった。どのような解決策が見つけられたとしても、何百もの入力フィールドを（少なくともロジックを確認するか、小さな変更を行うか）チェックする必要があります。 – FDavidov

おそらく、このようなものは、これは非常に角度-考えではないかもしれませんが、それはあなたが既存の構造を維持することができます。..

を十分であろう。

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>

出典

2016-11-01 14:28:28 Mackan

無効な入力でテキスト選択を有効にする

答えて

関連する問題