奇技淫巧:cssはフォーム全体の読み取り専用form readonlyを実現する
689 ワード
一般的な方法ではフォームの各input,selectなどにreadonlyを加えることが多いが,この方法には多くの欠点がある.ここでは一言も述べない.
私が言った方法は、フォームにクラスを追加するだけで、フォームを読み取り専用にすることができます.方法1:beforeでformに見えないマスクをして、下のすべての要素を隠して、いかなる事件にも応答しないようにします
私が言った方法は、フォームにクラスを追加するだけで、フォームを読み取り専用にすることができます.
方法1:beforeでformに見えないマスクをして、下のすべての要素を隠して、いかなる事件にも応答しないようにします
.form-readonly{
position: relative;
}
.form-readonly:before{
content: "";
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
方法2:pointer-events:noneで、すべてのイベントをformに貫通させる .form-readonly{
pointer-events:none;
}
pointer-eventsプロパティについては、次の説明を参照してください.https://segmentfault.com/a/11...
.form-readonly{
position: relative;
}
.form-readonly:before{
content: "";
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.form-readonly{
pointer-events:none;
}
pointer-eventsプロパティについては、次の説明を参照してください.https://segmentfault.com/a/11...