موقف/نمط المؤشر القابل للمرضين في Firefox

https://stackoverflow.com/questions/1987435

22-09-2019
|

سؤال

أواجه مشكلة في استخدام Contentable في Firefox 3. لدي مشكلة حيث سيظهر المؤشر أعلاه أو جزئيًا فقط في Div بعد النقر عليه (حتى أبدأ في الكتابة في أي وقت يتصرف فيه بشكل صحيح). أي أفكار حول كيف يمكنني منع هذا من الحدوث؟

لغة البرمجة:

<html>
  <head><title>Test Page</title></head>
  <body>
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px">
      <div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true"> </div>
    </div>
  </body>
</html>

alt text

المحلول 6

انتظرت واستخدمت المحتوى القابل للتحرير فقط في Firefox 4 وأعلى. لقد قدمت هذا وعدد قليل من الأخطاء الأخرى التي حددها فريق Mozilla لـ FF 4.

نصائح أخرى

أواجه نفس المشكلة بالضبط مع Firefox 37.0.2. وضع مساحة عرض صفر في القابلية للضمن: قبل أن يقوم العنصر الزائف بإصلاح المشكلة:

.contenteditable:empty:before {
  content: "\200B";
  display: inline;
}

يعمل Fix في جميع المتصفحات الحديثة ، بما في ذلك IE11 ، والتي لديها أيضًا مشكلة في موقع الذبابة تشبه إلى حد كبير Firefox.

تحتاج إلى وضع نوع من المحتوى أو HTML بين Div الذي تريد التحرير:

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

كنت أزعج عقلي لساعات في محاولة لإيجاد طريقة لاختراق هذا. ما توصلت إليه هو لف المحرر في Div وهو مخفي افتراضيًا. ثم استخدم القليل من JavaScript لعرض Div. يبدو أن هذا يجعل المؤشر يقفز إلى الموضع الصحيح. إنه قذر ، لكنه يعمل!

<div id="editor" style="display: none;">
     <% call RTE.renderTextArea(true) %>
</div>

<script>document.getElementById("editor").style.display="";</script>

واجهت أيضًا هذه المشكلة في أحدث إصدار من FF 22. في حالتي ، لم يكن لدي Div الخارجي (على سبيل المثال "محرر" أعلاه) ، وكان وضع المؤشر الخاص بي أقل من Divable. من خلال توفير ارتفاع إلى Div الخارجي ، على سبيل المثال height: 1.5em;, ، المؤشر وضع نفسه بشكل صحيح.

يمكن حل ذلك من خلال إنشاء Div الأعمى وإضافة التركيز عليه ، فإن متصفحك لا يركز على العنصر القابل للمرضين ، ولكن يجب على المستخدم النقر على ذلك وأن الحالة تُظهر المؤشر في المكان الصحيح.

$(document).ready(function(){
    $("#target_blind").focus();
});

<div id="target_blind" style="display:none;"></div>
<div id="target" contenteditable="true"></div>

هناك طريقة واحدة ، ومع ذلك لا تحل المشكلة ، فقط Smarten.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow