奇技淫巧:cssはフォーム全体の読み取り専用form readonlyを実現する


一般的な方法ではフォームの各input,selectなどにreadonlyを加えることが多いが,この方法には多くの欠点がある.ここでは一言も述べない.
私が言った方法は、フォームにクラスを追加するだけで、フォームを読み取り専用にすることができます.

方法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...