الحصول على نص محدد من عنصر تحكم TextBox باستخدام JavaScript

عند العمل مع مربعات النص، قد تواجه الحاجة إلى استرداد النص المحدد. تهدف هذه المقالة إلى توفير حل شامل لهذه المهمة، ومعالجة المشكلات التي تمت مواجهتها مع Internet Explorer 6.

يمكن تحديد النص داخل مربع النص باستخدام خصائص JavaScript المضمنة. بالنسبة للمتصفحات المتوافقة مع المعايير، توفر خصائص التحديدStart و SelectionEnd نطاق النص المحدد. ومع ذلك، بالنسبة لبرنامج Internet Explorer، من الضروري إيجاد حل بديل باستخدام كائن التحديد.

function ShowSelection() {
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined) { 
    // Standards-compliant version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  } else if (document.selection !== undefined) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: "   selectedText);
}

في البداية، ظهرت مشكلة في Internet Explorer 6، تمنع الكود أعلاه من العمل بشكل صحيح. لمعالجة هذه المشكلة، تتم إضافة استدعاء focus() قبل الوصول إلى كائن التحديد. بالإضافة إلى ذلك، فإن إرفاق الدالة ShowSelection() بحدث onkeydown يوفر حلاً مستقرًا لاكتشاف النص المحدد.

document.onkeydown = function (e) {
  ShowSelection();
};

لمزيد من التوضيح، تنبع مشكلة الأزرار من سلوكها المتأصل المتمثل في إلغاء تحديد النص في Internet Explorer. ولذلك، يوصى باستخدام زر إدخال بسيط بدلاً من ذلك. من خلال تنفيذ هذا الحل، يمكنك استرداد النص المحدد بشكل فعال من عنصر تحكم مربع النص، والتغلب على التحديات التي تواجهها مع Internet Explorer 6.