Атрибут autofocus тега <textarea> — фокус у полі одразу

HTML

<p class="head">Чотири поля з autofocus в одному документі</p>

<div class="anketa">
  <label class="pole">
    <span class="nazva">1. autofocus, але поле вимкнене (disabled)</span>
    <textarea name="a" autofocus disabled rows="2">вимкнене</textarea>
    <span class="znak bad">пропущено: у вимкнене поле фокус не ставлять</span>
  </label>

  <label class="pole">
    <span class="nazva">2. autofocus, але поле сховане (display: none)</span>
    <textarea name="b" class="schovane" autofocus rows="2">схованого не видно</textarea>
    <span class="znak bad">пропущено: схований елемент не фокусується</span>
  </label>

  <label class="pole">
    <span class="nazva">3. autofocus, поле лише для читання (readonly)</span>
    <textarea name="c" autofocus readonly rows="2">лише читання</textarea>
    <span class="znak good">ось хто виграв: readonly фокусу не заважає</span>
  </label>

  <label class="pole">
    <span class="nazva">4. autofocus, звичайне поле</span>
    <textarea name="d" autofocus rows="2">і це поле теж просило фокус</textarea>
    <span class="znak bad">пропущено: другий і наступні autofocus ігноруються</span>
  </label>
</div>

<p class="note">Клацніть у будь-яке поле або пройдіть їх клавішею Tab: поле, у якому
   зараз фокус, стає синім і отримує підпис. Саме одне таке поле переглядач і вибрав
   би сам — але лише одне й лише на завантаженні сторінки.</p>

<p class="note warn">У рамці прикладу autofocus не спрацює: рамка ізольована
   (чужий origin), а туди переглядач фокус не віддає — це та сама причина, через
   яку autofocus мовчить у вбудованих рамках на живих сторінках.</p>

CSS

.head {
    margin: 0 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.anketa {
    max-width: 560px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.pole {
    display: block;
    margin-bottom: 14px;
}

.nazva {
    display: block;
    margin-bottom: 3px;
    font-size: .9em;
}

.schovane {
    display: none;
}

textarea {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    font: inherit;
}

textarea:focus {
    border: 2px solid #2f6fd0;
    background: #eef3fb;
    outline: 3px solid #9dc0f0;
}

.znak {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: .85em;
}

.bad {
    background: #fff4f4;
    color: #c0392b;
}

.good {
    background: #f3fbf4;
    color: #1b5e20;
}

.pole:has(textarea:focus) .znak::after {
    content: " — і саме тут зараз фокус";
    font-weight: 600;
    color: #1b4f9c;
}

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

.warn {
    padding: 6px 10px;
    border-radius: 4px;
    background: #fff6d8;
    color: #8a6100;
}

HTML

<p>Текстове поле <code>textarea</code></p>
<hr>
<div>
  <p>Без використання  <code>autofocus</code></p>
  <textarea></textarea>
</div>
<div>
    <p>З використання  <code>autofocus</code></p>
<textarea autofocus></textarea>
</div>

CSS

div{
  float:left;
  padding:10px;
}