Атрибут readonly тега <textarea> — заборона правки

HTML

<p>Щоб змінити повідомлення натисніть на кнопку "Розблокувати"</p>
<p>Напишіть своє повідомлення:</p>
<textarea type="text" class="b1" id="myText" readonly="readonly"/>Коли ми щасливі, ми завжди добрі, але коли ми добрі, ми не завжди щасливі. 
</textarea><br/><br>

<div id="sales"><input type="submit" value="Розблокувати" onclick="buy()" /></div>

CSS

#sales{
  color:red;
}

JS

var sales_1 = document.getElementById("sales");
function buy() {
  document.getElementById('myText').readOnly = false;
  sales.innerHTML = '<input type="submit" value="Заблокувати поле" onclick="cancel()" /> Поле розблоковане! Змініть назву міста! ';
}
function cancel() {
  document.getElementById('myText').readOnly = true;
  sales.innerHTML = '<input type="submit" value="Розблокувати" onclick="buy()" />';
}
//# sourceURL=pen.js

HTML

<form>
  <p>З використанням атрибута readonly</p>
  <p>Введіть своє повідомлення:</p>
   <p><textarea rows="6" cols="20" class="a1" readonly>Єдине щастя в житті – це постійне прагнення вперед. </textarea><br><br>
		<button type = "submit">Надіслати</button>
	</form>
<br>
<form>
  <p>Без використання атрибута readonly</p>
  <p>Введіть своє повідомлення:</p>
		<p><textarea rows="6" cols="20">Єдине щастя в житті – це постійне прагнення вперед.</textarea><br><br>
		<button type = "submit">Надіслати</button>
	</form>

CSS

.a1{
  color:grey;
}

HTML

<form>
    <p class="lbl"><label for="a">Звичайне поле</label></p>
    <textarea id="a" name="a" placeholder="сюди можна писати"></textarea>
    <p class="note">редагується, надсилається, перевіряється</p>

    <p class="lbl"><label for="b">readonly</label></p>
    <textarea id="b" name="b" readonly required placeholder="плейсхолдер видно й тут">Текст можна виділити й скопіювати, а змінити — ні.</textarea>
    <p class="note">фокус бере, НАДСИЛАЄТЬСЯ, а required на ньому мовчить</p>

    <p class="lbl"><label for="c">disabled</label></p>
    <textarea id="c" name="c" disabled required>Вимкнене поле.</textarea>
    <p class="note">фокусу не бере і в дані форми не потрапляє зовсім</p>
</form>

<div class="trap">
    <p class="lbl">Пастка: те саме правило, але без теґа — просто :read-only</p>
    <textarea readonly>Поле, яке не редагується.</textarea>
    <p>А цей абзац — не поле. Він теж не редагується, тому пунктир дістався
        і йому, і підпису вгорі.</p>
</div>

CSS

.trap :read-only {
    outline: 2px dashed #d64545;
    outline-offset: 3px;
}

.trap {
    max-width: 520px;
    margin-top: 30px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    background: #f6f9ff;
}

.trap p:last-child {
    margin: 12px 0 0;
    color: #c0392b;
}

.lbl {
    margin: 18px 0 4px;
}

label {
    font-weight: 600;
}

textarea {
    width: 340px;
    max-width: 100%;
    height: 60px;
    padding: 6px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
}

textarea:read-only {
    background: #eef1f5;
    color: #4a5361;
}

textarea:disabled {
    background: #f4f5f7;
    color: #9aa3b2;
    border-color: #d3d9e2;
}

.note {
    margin: 4px 0 0;
    max-width: 460px;
    color: #5a6472;
    font-size: .9em;
}