TAG
CSS
JavaScript
Result
Run
License
<form class="nottransmitted"> <fieldset> <label><input type="checkbox" id="readonly" />Read Only</label> <textarea id="content" name="content"></textarea> <div><button id="btn-send" type="button">Test</button></div> </fieldset> </form>
.nottransmitted { padding: 30px 20px; position: relative; } .nottransmitted::before { content: "Not transmitted"; position: absolute; background: #454545; top: 0; padding: 3px 10px; color: yellow; border-radius: 5px; } .nottransmitted > fieldset { display: flex; flex-direction: column; row-gap: 7px; }
window.addEventListener("load", () => { const $elContent = document.getElementById("content"); const $elReadOnly = document.getElementById("readonly"); const $elBtnSend = document.getElementById("btn-send"); $elReadOnly.addEventListener("click", e => { $elContent.readOnly = e.currentTarget.checked; if($elContent.readOnly) { $elContent.placeholder = "Read Only"; } else { $elContent.placeholder = ""; } }); $elBtnSend.addEventListener("click", e => { console.log(`willValidate: ${$elContent.willValidate}`); }); });
Console
expand_less
License
License
by DevDic
Close