2011-08-05 12 views
20

Kullanıcıya belirli şeyleri yazarken yardımcı olmak için <textarea>'da bir açılır liste görüntülemek istiyorum. Bunu mevcut IDE'lerden kod tamamlama olarak biliyorsunuz. Bir şeyler yazmaya başladığınızda, geçerli imleç/caret konumunun sağında bir açılır pencere görünür ve metin girişinizi tamamlamak için ok tuşlarını kullanarak gezinebilirsiniz.Bir HTML metin yazımındaki imleç konumunu (X/Y değil, çizgi/sütun) nasıl bulabilirim?

I (imleç konumunun karakter indeksi yani) Metin dizesinde how to get the cursor position biliyorum ama o kadar <textarea> elemanın iç imlecin X/Y koordinatları (offsetWidth ve offsetHeight gibi bir şey) almak için nasıl bilmiyorum Liste elemanımı orada yerleştirebilirim. HTML/JavaScript’te bu mümkün mü ve nasıl çalışırdı? Eğer şapka pozisyonunda boş Span öğesi eklemek ve açılan görüntülemek için bu elemanın konumunu alabilir: (jsfiddleCKeditor veya Rich Text Editor veya daha iyi gibi bir iç çerçeveye) düzenlenebilir html girişi ile

+2

+ 1 Bu oldukça iyi bir soru! – Ben

+3

Karakterlerin sayısını ve kutunun genişliğini biliyorsanız, ortalama karakter genişliği/çizgi yüksekliğine göre konumu tahmin edebilir misiniz? –

+0

Önerilen diğer soruyu okudum, ancak cevabını sorunun bir çözümü olarak görmüyorum. Ayrıca, bu 3 yaşında ve tarayıcılar ve standartlar bu arada gelişmiştir. Bunun çalışması için geçerli bir tarayıcı gerektirmekten korkmuyorum. – ygoe

cevap

2

.

Karmaşık görünebilir, ancak bunu yapmak için başka bir yol düşünemiyorum. Bir kod editörü için kullanıldığında

O bazı ekstra olanakları var renk kodu jsfiddle gibi metin ve format kodu yapar olabilir ve belki de anahtar kelimeler vb tamamlama kod otomatik çeşit inşa

+1

Ekstra olanaklar, ilginç öneriniz gibi iyidir. Ancak, kullanıcının biçimlendirilmiş metin giremediğinden emin olmak isterim (MS Word veya diğer web sayfalarından kopyalama yaparken olduğu gibi) ve yapıştırılan metnin tamamı düz metin gibi görünecek şekilde yeniden biçimlendirilir ve bunlara dönüştürülebilir. – ygoe

+0

Bu mümkün, jsfiddle.net sadece bunu yapar. Tam olarak nasıl yaparlar bilmiyorum. Bir an için o sitede kodlamayı ve yapıştırma yapmayı deneyin, size bazı fikirler verebilir. (FF ctrl + v çalışmıyor, ancak "sağ tıklama - yapıştır" yapar) – Willem

+0

CKeditor açık kaynak olarak indirilebilir ve kullanılabilir, ancak jsfiddle sadece bir web uygulaması gibi görünüyor, hiçbir indirme, teknik içgörü yok. Eşyalarını nasıl yaptığını biliyor musun? – ygoe

İlgili konular