كيف يمكنني الحصول على إحداثيات البكسل (x، y) لعلامة الإقحام في مربعات النص؟

Question

أنا أستخدم jQuery وأحاول العثور على طريقة عبر المتصفح للحصول على إحداثيات البكسل لعلامة الإقحام <textarea>رمل input مربعات بحيث يمكنني وضع div في مكانه تمامًا حول هذا الموقع.

هل هناك بعض المكونات الإضافية لـ jQuery؟أو مقتطف جافا سكريبت للقيام بذلك؟

Answer 1

لقد بحثت عن البرنامج المساعد لإحداثيات علامة الإقحام textarea نيزك الإكمال التلقائي, ، لذا قمت بتقييم جميع المكونات الإضافية الثمانية الموجودة على GitHub.الفائز هو، إلى حد بعيد، منطقة النص-علامة الإقحام-الموضع من عنصر.

سمات

• دقة البكسل
• لا التبعيات على الإطلاق
• التوافق المتصفح:كروم وسفاري وفايرفوكس (على الرغم من اثنين البق لديها)، IE9 +؛قد يعمل ولكن لم يتم اختباره في Opera أو IE8 أو أقدم
• يدعم أي مجموعة خطوط وحجم، بالإضافة إلى تحويلات النص
• يمكن أن تحتوي منطقة النص على حشوة أو حدود عشوائية
• لا يتم الخلط بينه وبين أشرطة التمرير الأفقية أو الرأسية في منطقة النص
• يدعم الإرجاعات الثابتة وعلامات التبويب (باستثناء IE) والمسافات المتتالية في النص
• الموضع الصحيح على الأسطر الأطول من الأعمدة الموجودة في منطقة النص
• لا موقف "الشبح" في المساحة الفارغة في نهاية السطر عند تغليف الكلمات الطويلة

هنا عرض توضيحي - http://jsfiddle.net/dandv/aFPA7/

كيف تعمل

مرآة <div> يتم إنشاؤه خارج الشاشة وتصميمه تمامًا مثل <textarea>.بعد ذلك، يتم نسخ نص منطقة النص حتى علامة الإقحام إلى div وa <span> يتم إدراجه مباشرة بعد ذلك.بعد ذلك، يتم تعيين محتوى النص للامتداد على بقية النص في منطقة النص، من أجل إعادة إنتاج الغلاف في القسم الزائف بأمانة.

هذه هي الطريقة الوحيدة المضمونة للتعامل مع جميع حالات الحواف المتعلقة بتغليف الخطوط الطويلة.يتم استخدامه أيضًا بواسطة GitHub لتحديد موضعه @ القائمة المنسدلة للمستخدم.

Answer 2

ملحوظة:تصف هذه الإجابة كيفية الحصول على إحداثيات الشخصية لمؤشر النص/علامة الإقحام.للعثور على إحداثيات البكسل، ستحتاج إلى توسيع هذا أبعد من ذلك.

أول شيء يجب أن تتذكره هو أن المؤشر يمكن أن يكون في ثلاث حالات

• مؤشر الإدراج العادي في موضع معين
• تحديد نص يحتوي على منطقة محددة معينة
• غير فعال:منطقة النص ليس لديها التركيز.لم يتم استخدامه.

يستخدم نموذج IE الكائن document.select, ، من هذا يمكننا الحصول على نطاق النص الكائن الذي يتيح لنا الوصول إلى التحديد وبالتالي موضع (مواضع) المؤشر.

يستخدم نموذج/Opera FF المتغيرات المفيدة [input].selectionStart و SelectionEnd.

يمثل كلا النموذجين مؤشرًا نشطًا عاديًا كتحديد بعرض صفري، مع كون الحد الأيسر هو موضع المؤشر.

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

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

ملاحظة الشوائب:لم يتم ترميز الروابط بشكل صحيح في الفقرة العلوية.

كائن التحديد: http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
كائن نطاق النص: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

لا أعتقد أنه يمكن القيام بذلك في كل متصفح.لقد قام شخص ما بذلك في IE6، لكنه لا يعمل في FF أو Opera (AFAIK).ربما يمكنك جعله يعمل في جميع المتصفحات.

إليك مشاركة مدونة من عام 2005.