Можно ли выполнить автофокусировку при использовании самоцвета trix с простой формой на рельсах?

Question

Я пытаюсь сделать автофокус формы на редакторе при открытии страницы, но безрезультатно. Вот как выглядит код в настоящее время:

.row
  .col-md-12= f.input :note, as: :trix_editor

Добавление autofocus: true не меняет фокус при загрузке страницы, и было бы действительно здорово, если бы было решение этой проблемы. Спасибо за ваше время!

Answer 1

Согласно документам:

Как и HTML , <trix-editor> принимает атрибуты автофокуса и заполнителя.</p></blockquote><p>Они также используют атрибут автофокуса (успешно) на домашней странице <a href="https://trix-editor.org/" rel="noopener nofollow noreferrer" target="_blank">https://trix-editor.org/</a>.</p><p>Вы уверены, что добавили атрибут autofocus в сам элемент trix-editor?</p> </div> <div class="a-info"> <div class="row"> <div class="col-sm-2"> <a class="like-button" title="Чтобы оценить ответ необходимо войти под своим логином." > <div class="btn btn-my btn-block" style="background: #bdc3c7 "> <span itemprop="upvoteCount">2</span> <i class="far fa-thumbs-up"></i> </div> </a> </div> </div> <div class="row"> <div class="col-sm-4"> <a class="a-source" href="https://stackoverflow.com/questions/53769951/is-it-possible-to-autofocus-while-using-the-trix-gem-with-simple-form-on-rails/53770645#53770645" target="_blank">Источник</a> <a class="a-share" href="https://stackru.com/questions/4206631/mozhno-li-vyipolnit-avtofokusirovku-pri-ispolzovanii-samotsveta-trix-s-prostoj-formoj-na-relsah/4206647#4206647" itemprop="url">Поделиться</a> </div> <div class="col-sm-8 text-right author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span itemprop="name"> <a href="https://stackoverflow.com/users/1293749/user1293749" class="q-user" rel="noopener" target="_blank">user1293749</a> </span> <span class="q-date" title="2018-12-13 21:55"> 13 дек '18 в 21:55</span> <span class="hidden" itemprop="dateCreated" datetime="2018-12-13 21:55">2018-12-13 21:55</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2018-12-13 21:55">2018-12-13 21:55</span> </div> </div> <div class="text-center"> </div> <div class="text-center"> </div> <div class="another-questions"> <div class="row"> <div class="col-md-12 q-tags"> <b>Другие вопросы по тегам</b> <a href="/questions/tagged/html" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'html'">html</a> <a href="/questions/tagged/ruby-on-rails" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'ruby-on-rails'">ruby-on-rails</a> <a href="/questions/tagged/simple-form" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'simple-form'">simple-form</a> <a href="/questions/tagged/autofocus" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'autofocus'">autofocus</a> <a href="/questions/tagged/trix" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'trix'">trix</a> </div> </div> </div> </div> </div> <div class="col-lg-3 AD"> <div id="allFlyout3-0" style="position: sticky; top: 0;"> </div> </div> </div> </div> </section> </main> <div class="padding"></div> </div> <footer> <div class="container"> <div class="row"> <div class="col-sm-6"> <a href="/"> <img src="/static/img/logo.png" alt="stackru.com - Поиск вопросов и ответов по программированию" /> </a> </div> <div class="col-sm-6 text-right"> <span class="pull-right"><a href="mailto:[e-mail]">[e-mail]</a></span> <br /> <span class="license pull-left">licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="nofollow license" target="_blank">cc by-sa 3.0</a> with attribution</span> </div> </div> </div> </footer> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53936023, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53936023" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141489240-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-141489240-1'); </script> </body> </html>