Bu tarayıcıda seçili metin yapıyor alıyorum bir anda metin pozisyonunu

Question

seçilen Başlarken: Özel bir tuşa basıldığında

window.getSelection(); 

Şimdi bu metinde üzerinde bir araç ipucu göstermek gerekir (not fare olabilir o artık metnin üzerinde olmamalı), bu yüzden bunu yapmak için seçilen metnin mutlak konumuna ihtiyacım var.

Bunu yapmak için bir yol var mı, belki de bu metni bir etiketin içine yerleştirip sonra ofsetleri mi alıyorsunuz?

Fikriniz Var mı?

PS: tüm tarayıcılar için, krom çalışmak zorunda.

PS2: Benim berbat İngilizcem için özür dilerim.

Answer 1

En kolay yol, seçimin başlangıcında veya sonunda geçici bir işaretleyici elemanın yerleştirilmesi ve konumunun elde edilmesidir. Ben Yığın taşması önce bunun nasıl göstermiş: How can I position an element next to user text selection?

Answer 2

s = window.getSelection(); 

bir Seçimi döndürür. Bu nedenle, istemci (sabit) koordinatlarında sınırlayıcı dikdörtgeni oRect olacak oRect .

Answer 3

getBoundingClientRect kullanmadan önce, this note bilmek gerekir:

CSSOM çalışılan taslak her sınır kutusu için bir ClientRect döndüren belirtir

Ve bu 'standart' ile

:

Satır içi bir öğe için, iki tanım aynıdır. Ancak bir blok öğesi için Mozilla sadece tek bir dikdörtgen döndürür. Bu yayını okuyan herkes daha hassas pozisyonlarda ve seçilen metinlerin düzenleri için genel bir çözüm istiyor Yani eğer

, aşağıdaki yaklaşımlar önermek:

Seçenek 1: kesin başlayan ve ve metinlerin bitiş noktası bulun tarafından inserting invisible elements. Ardından, seçilen satır dikdörtgenlerini çıkarılan hesaplanmış çizgi yüksekliği ve kapsayıcı genişliği ile hesaplayın. Kullanımdaki API'ler: window.getComputedStyle.

• Pro: Sonuç, her metin satırı için en kesin sonuçtur.
• Con: 1) Seçim, farklı çizgi yükseklikleri ve genişlikleri olan birkaç düğüm üzerinde ise, algoritma karmaşık hale gelir. 2) Basit bir özelliği uygularken çok fazla zaman harcayan hesaplama algoritmasını uygulamanız gerekir.

Seçenek 2: Wrap her her kutunun düzenini ayıklanması bir dikkatle tarz sıralı eleman ile metin, ve çizgilerin içine sonuçlarını birleştirmek.

• Pro: Tüm sürekli seçimler için geçerlidir (temel olarak geçerli ana tarayıcı uygulamalarındaki tüm durumlar anlamına gelir.). Metinlerin her satırı için yeterince iyi.
• Con: 1) Bazı durumlarda hata, kerning hata genişlikleri eklediğinden, biraz yanlıştır. 2) Çok geniş bir metin seçiminde yavaştır. seçenek 2 için

, rangeblock size metnin her satırının affı düzenini verir kolay API ile varolan uygulamasıdır:

let block = rangeblock.extractSelectedBlock(window, document); 
console.info("Text layout: " + JSON.stringify(block.dimensions)); 
// output: Text layout: {Left: 100, Top: 90, Width: 200, Height: 50} 

ait