Document.caretPositionFromPoint()‎

من موسوعة حسوب
مراجعة 18:45، 1 أبريل 2018 بواسطة عبد-الهادي-الديوري (نقاش | مساهمات) (إضافة الصّفحة)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

تنبيه: هذه تقنيّة تجريبيّة، انظر جدول دعم المتصفّحات قبل استخدام هذا التّابع في شيفرة إنتاجيّة.

يعيد التّابع Document.caretPositionFromPoint‎()‎ كائنًا من النّوع CaretPosition يحتوي على عقدة DOM ومكان علامة الإقحام (caret) وحدود محارف (character offset) العلامة داخل هذه العقدة.

البنية العامة

var caretPosition = document.caretPositionFromPoint(float x, float y);

المعاملات

x

الإحداثيّ الأفقيّ لنقطة ما.

y

الإحداثيّ العمودي لنقطة ما.

القيمة المعادة

كائن من النّوع CaretPosition.

مثال

يقوم المثال التّالي بإدخال فراغًا سطريًّا (line breaks) أينما ضغطت. جزء HTML:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

جزء JavaScript:

function insertBreakAtPoint(e) {
  var range;
  var textNode;
  var offset;

  if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.clientX, e.clientY);
    textNode = range.offsetNode;
    offset = range.offset;
  } else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    textNode = range.startContainer;
    offset = range.startOffset;
  }

  // قسّم العقد النّصيّة فقط
  if (textNode.nodeType == 3) {
    var replacement = textNode.splitText(offset);
    var br = document.createElement('br');
    textNode.parentNode.insertBefore(br, replacement);
  }
}

window.onload = function (){
  var paragraphs = document.getElementsByTagName("p");
  for (i=0 ; i < paragraphs.length; i++) {
    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
  }
};

دعم المتصفّحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 53 نعم نعم 40 نعم

مصادر ومواصفات