JavaScript/Document/caretPositionFromPoint

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

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

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

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

المعاملات

x

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

y

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

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

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

مثال

يقوم المثال التّالي بإدخال فراغ سطريً (line break) أينما ضغطت.

جزء 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	نعم

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

• مواصفة Shadow DOM