ContentEditable положение курсора / стиль в FireFox
У меня возникают проблемы с использованием contentEditable в FireFox 3. У меня проблема, когда курсор появляется над или только частично в элементе div после того, как я нажимаю на него (пока я не начну печатать, когда он будет работать правильно). Любые идеи о том, как я могу предотвратить это?
HTML:
Тестовая страница</ title></ head> <Тело> <div id = "editor" style = "position: absolute; left: 157px; верх: 230px; ширина: 120px; высота: 30px"> <div id = "input" style = "width: 100%; высота: 100%; граница: 1px сплошной черный; контур: нет" contentEditable = "true"> </ div> </ DIV> </ Body></ Html></pre><p><img alt="альтернативный текст" src="https://imgur.com/ZqxU9.png"/></p> </div> </div> </div> <div class="q-info"> <div class="row"> <div class="col-sm-2"> <a class="like-button" title="Чтобы оценить вопрос необходимо войти под своим логином." > <div class="btn btn-my btn-block q-like" style="background: #bdc3c7 "> <span itemprop="upvoteCount">7</span> <i class="far fa-thumbs-up"></i> </div> </a> </div> <div class="col-md-10 q-tags"> <a href="/questions/tagged/richtextbox" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richtextbox'">richtextbox</a> <a href="/questions/tagged/contenteditable" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'contenteditable'">contenteditable</a> <a href="/questions/tagged/richtext" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richtext'">richtext</a> <a href="/questions/tagged/richedit" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richedit'">richedit</a> <a href="/questions/tagged/richtextediting" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richtextediting'">richtextediting</a> </div> </div> <div class="row"> <div class="col-sm-4"> <a class="q-source" href="https://stackoverflow.com/questions/1987435/contenteditable-cursor-positionstyle-in-firefox" target="_blank">Источник</a> <a class="q-share" href="https://stackru.com/questions/3690929/contenteditable-polozhenie-kursora-stil-v-firefox" 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/64421/user64421" class="q-user" rel="noopener" target="_blank">user64421</a> </span> <span class="q-date" title="2009-12-31 23:07"> 31 дек '09 в 23:07</span> <span class="hidden" itemprop="dateCreated" datetime="2009-12-31 23:07">2009-12-31 23:07</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2009-12-31 23:07">2009-12-31 23:07</span> </div> <div id="Answers"> <h2 class="answers-title"> <span class="a-count" itemprop="answerCount">6</span> ответов </h2> <div class="accepted-answer">Решение</div> <div id="3690945" class="answer accepted-answer-vertical" itemscope itemtype="http://schema.org/Answer" itemprop="acceptedAnswer"> <div class="a-body"> <div class="a-text" itemprop="text"> <p>Я ждал и использовал контент, редактируемый только в Firefox 4 и выше. Я подал это и несколько других ошибок, которые команда Mozilla исправила для FF 4.</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">0</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/1987435/contenteditable-cursor-positionstyle-in-firefox/3393911#3393911" target="_blank">Источник</a> <a class="a-share" href="https://stackru.com/questions/3690929/contenteditable-polozhenie-kursora-stil-v-firefox/3690945#3690945" 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/64421/user64421" class="q-user" rel="noopener" target="_blank">user64421</a> </span> <span class="q-date" title="2010-08-03 05:57"> 03 авг '10 в 05:57</span> <span class="hidden" itemprop="dateCreated" datetime="2010-08-03 05:57">2010-08-03 05:57</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2010-08-03 05:57">2010-08-03 05:57</span> </div> </div> <div id="3690953" class="answer " itemscope itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"> <div class="a-body"> <div class="a-text" itemprop="text"> <p>У меня точно такая же проблема с Firefox 37.0.2. Помещение пробела нулевой ширины в псевдоэлемент contenteditable's:before решает проблему:</p><pre><code>.contenteditable:empty:before { content: "\200B"; display: inline; } </code></pre><p>Исправление работает во всех современных браузерах, включая IE11, который также имеет проблему с позицией каретки, очень похожую на Firefox.</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">8</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/1987435/contenteditable-cursor-positionstyle-in-firefox/30213773#30213773" target="_blank">Источник</a> <a class="a-share" href="https://stackru.com/questions/3690929/contenteditable-polozhenie-kursora-stil-v-firefox/3690953#3690953" 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/3318612/user3318612" class="q-user" rel="noopener" target="_blank">user3318612</a> </span> <span class="q-date" title="2015-05-13 11:41"> 13 май '15 в 11:41</span> <span class="hidden" itemprop="dateCreated" datetime="2015-05-13 11:41">2015-05-13 11:41</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2015-05-13 11:41">2015-05-13 11:41</span> </div> </div> <div id="3690942" class="answer " itemscope itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"> <div class="a-body"> <div class="a-text" itemprop="text"> <p>Вам нужно поместить какой-то контент или HTML между DIV, который вы хотите редактировать:</p><pre><code><div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div> </code></pre> </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/1987435/contenteditable-cursor-positionstyle-in-firefox/1987481#1987481" target="_blank">Источник</a> <a class="a-share" href="https://stackru.com/questions/3690929/contenteditable-polozhenie-kursora-stil-v-firefox/3690942#3690942" 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/240609/user240609" class="q-user" rel="noopener" target="_blank">user240609</a> </span> <span class="q-date" title="2009-12-31 23:30"> 31 дек '09 в 23:30</span> <span class="hidden" itemprop="dateCreated" datetime="2009-12-31 23:30">2009-12-31 23:30</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2009-12-31 23:30">2009-12-31 23:30</span> </div> </div> <div id="3690955" class="answer " itemscope itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"> <div class="a-body"> <div class="a-text" itemprop="text"> <p>Я часами ломал голову, пытаясь найти способ взломать это. Я придумал обернуть редактор в div, который по умолчанию скрыт. Затем используйте небольшой встроенный JavaScript для отображения div. Это, кажется, заставляет курсор перейти в правильное положение. Это грязно, но это работает!</p><pre><code><div id="editor" style="display: none;"> <% call RTE.renderTextArea(true) %> </div> <script>document.getElementById("editor").style.display="";</script> </code></pre> </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">1</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/1987435/contenteditable-cursor-positionstyle-in-firefox/2986209#2986209" target="_blank">Источник</a> <a class="a-share" href="https://stackru.com/questions/3690929/contenteditable-polozhenie-kursora-stil-v-firefox/3690955#3690955" 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/98740/user98740" class="q-user" rel="noopener" target="_blank">user98740</a> </span> <span class="q-date" title="2010-06-06 22:39"> 06 июн '10 в 22:39</span> <span class="hidden" itemprop="dateCreated" datetime="2010-06-06 22:39">2010-06-06 22:39</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2010-06-06 22:39">2010-06-06 22:39</span> </div> </div> <div id="3690956" class="answer " itemscope itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"> <div class="a-body"> <div class="a-text" itemprop="text"> <p>Я также столкнулся с этой проблемой в последней версии FF 22. В моем случае мой внешний div (например, "редактор", как указано выше) не имел высоты, и моя позиция курсора была ниже contenteditable div. Обеспечивая высоту внешнему элементу, например, <code>height: 1.5em;</code>курсор правильно позиционируется.</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">1</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/1987435/contenteditable-cursor-positionstyle-in-firefox/17678863#17678863" target="_blank">Источник</a> <a class="a-share" href="https://stackru.com/questions/3690929/contenteditable-polozhenie-kursora-stil-v-firefox/3690956#3690956" 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/713026/user713026" class="q-user" rel="noopener" target="_blank">user713026</a> </span> <span class="q-date" title="2013-07-16 14:10"> 16 июл '13 в 14:10</span> <span class="hidden" itemprop="dateCreated" datetime="2013-07-16 14:10">2013-07-16 14:10</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2013-07-16 14:10">2013-07-16 14:10</span> </div> </div> <div id="3690950" class="answer " itemscope itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"> <div class="a-body"> <div class="a-text" itemprop="text"> <p>Это может быть решено путем создания слепого div и добавления фокуса к нему, тогда ваш браузер не сфокусирован на элементе contenteditable, но пользователь должен нажать на него, и в этом случае он показывает курсор в нужном месте.</p><pre><code>$(document).ready(function(){ $("#target_blind").focus(); }); <div id="target_blind" style="display:none;"></div> <div id="target" contenteditable="true"></div> </code></pre><p>Есть один способ, но он не решает проблему, а только умнее.</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">0</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/1987435/contenteditable-cursor-positionstyle-in-firefox/8145830#8145830" target="_blank">Источник</a> <a class="a-share" href="https://stackru.com/questions/3690929/contenteditable-polozhenie-kursora-stil-v-firefox/3690950#3690950" 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/919589/user919589" class="q-user" rel="noopener" target="_blank">user919589</a> </span> <span class="q-date" title="2011-11-16 02:16"> 16 ноя '11 в 02:16</span> <span class="hidden" itemprop="dateCreated" datetime="2011-11-16 02:16">2011-11-16 02:16</span> </div> </div> </div> <span class="hidden" itemprop="dateCreated" datetime="2011-11-16 02:16">2011-11-16 02:16</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/richtextbox" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richtextbox'">richtextbox</a> <a href="/questions/tagged/contenteditable" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'contenteditable'">contenteditable</a> <a href="/questions/tagged/richtext" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richtext'">richtext</a> <a href="/questions/tagged/richedit" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richedit'">richedit</a> <a href="/questions/tagged/richtextediting" class="tag-block-link" rel="tag" title="показать вопросы с тегом 'richtextediting'">richtextediting</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:info@stackru.com">info@stackru.com</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>