كيفية الحصول على النص المحدد من سيطرة النص مع جافا سكريبت

StackOverflow https://stackoverflow.com/questions/275761

سؤال

ولدي نص وزر الارتباط. عندما أكتب بعض النصوص، ثم حدد بعضهم ومن ثم انقر فوق زر الرابط، يجب أن يكون النص المحدد من نص العرض مع MESSAGEBOX.

وكيف يمكنني أن أفعل ذلك؟

وعندما تضغط على زر إرسال لمربع النص أدناه، يجب مربع الرسالة تظهر أبجد هوز. بسبب عدم تحديد "هوز أبجد" في المنطقة.

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

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

وكيف يتم ذلك؟

هل كانت مفيدة؟

المحلول

وOK، هنا هو رمز لدي: 

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)
  {// IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

والمشكلة، على الرغم من أن يتم إعطاء رمز أعطي لIE على الكثير من المواقع، وأنا لا يمكن أن تجعل من العمل على نسختي من IE6 على نظام بلدي الحالي. ربما انها ستعمل بالنسبة لك، وهذا هو السبب في أنني تعطيه.
خدعة كنت تبحث عن وربما الدعوة .focus ()، لتقديم الأفضل لناحية النص التركيز حتى يتم إعادة تنشيط التحديد.

و[تحديث] حصلت على النتيجة الصحيحة (محتوى اختيار) مع الحدث عند_ضغط_مفتاح: 

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

وهكذا رمز هو الصحيح. مرة أخرى، المسألة لللحصول على الاختيار على انقر على زر ... I الاستمرار في البحث.

و[تحديث] حصلت أي نجاح مع زر تعادل مع علامة li، لأننا عندما اضغط عليه، IE إلى إلغاء اختيار السابقة. يعمل رمز أعلاه مع زر input بسيط، على الرغم من ...

نصائح أخرى

وهنا الحل أبسط من ذلك بكثير، استنادا إلى حقيقة أن اختيار النص يحدث على mouseup، لذلك نضيف المستمع الحدث لذلك: 

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

وهذا يعمل في جميع المتصفحات.

إذا كنت تريد أيضا للتعامل مع اختيار طريق لوحة المفاتيح، إضافة المستمع حدث آخر لkeyup، مع نفس الرمز.

إذا لم يكن لهذا فايرفوكس علة قدم الظهر في عام 2001 (نعم، قبل 14 عاما)، ونحن يمكن أن تحل محل القيمة التي تم تعيينها لwindow.mySelection مع window.getSelection().toString()، الذي يعمل في IE9 + وجميع المتصفحات الحديثة، وأيضا يحصل على هذا الاختيار في مناطق غير تيكستاريا للDOM. 

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(t);
}
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />

لأوبرا، فايرفوكس وسفاري، يمكنك استخدام الدالة التالية: 

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

وبعد ذلك، يمكنك فقط تمرير إشارة إلى عنصر حقل النص (مثل جزء النص أو إدخال عنصر) إلى وظيفة: 

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

وأو، إذا كنت تريد