Kafayı yemek üzereyim. (HTML 5 + Jquery Events) yediniz beni

Öncelikle beynim uyuştu artık : ) uzun uzun anlatıyım çözülsün şu sorun ya..

--------------------------

Arkadaşlar 2 - 3 ayrı sorunum var. Yardımcı olursanız sevvinirim.
Aslında ilk sorunu çözme yöntemim ikinci, ikincinin ki ise üçüncüyü doğuruyor ve bu şekilde uzayıp gidiyor.


Amacım:
<div contenteditable="true">...</div> (HTML 5) özelliği ile komplex bir form dizesi elde etmek.


Sorun 1:

contenteditable="true" komutu ile birlikte şu sorun geldi;


İçerisinde class="" veya style="" olan bir yazıyı (kopyala - yapıştır) ya da (sürükle - bırak) yaptığımda <div contenteditable="true">...</div> üç nokta ile görünen yere o yazıyı atıyor fakat style veya class özellikleri ile birlikte atıyor. Ben bunu istemiyorum tabiki,


Sorun 1 çözüm 1:

contenteditable="true" yerine contenteditable="plaintext-only" kullanmak.


Sorun 2:

plaintext-only komutu kullandığım zaman sadece (chrome,safari vb.) WEBKIT tarayıcıları destekliyor. Diğer (mozilla,Interner explorer vb.) tarayıcılarda contenteditable çalışmıyor. Bu nedenle Sorun 1 çözüm 1: den vaz geçmiş oldum. Sorun 2 de ortadan kaltı.


Sorun 1 çözüm 2:

$('body').on('input propertychange keyup keydown paste bind change focus',
'#maskContent',function(){.................});

- Yukarıdaki #maskContent bahsettiğim contenteditable olan div içeriğimdir.


- Yukarıdaki komutta şunu yapıyorum;
Kısacası, o div' de herhangi bir değişiklik olursa (tuş basma, tuş çekme, ctrl+v, seçme vs. vs.) aşağıdaki fonksiyonu çalıştır.

	function stripValue(html) {
	    var tempDiv = document.createElement("DIV");
	    tempDiv.innerHTML = html;
	    return tempDiv.innerText;
	}
 // stripValue(html)  -> Burdaki html '#maskContent' e aittir

Yani kısacası, yukarıdaki fonksiyon şu işlemi yapıyor. CTRL+V veya Mouse ile Yapıştır gibi bir işlem olursa, Gelen metini saf hale dönüştürüyor. Ama bu seferde (CURSOR) imleci en başa götürüyor. Basit bir örnek verirsem;


<div contenteditable="tru">(|imleç)Merhaba dünya</div>

Böylece bir Sorun 2 daha doğmuş oluyor.

Şimdi sorarım size,

İmleci klavyeden (End) tuşuna basılmışçasına en son a nasıl zıplatabilirim?
-----------------------

Herkese teşekkürler.

(function(jQuery) {
    jQuery.fn.imlecSonda = function() {
        textAlani = this;
        return textAlani.each(function() {
            var vody = jQuery(textAlani).val();
            jQuery(textAlani).focus().val("").val(vody);
        });
    };
})(jQuery);

jQuery("#kutu").imlecSonda();

Demo => http://jsfiddle.net/idilmiray/awSuH/

















__________________________________________________

Teşekkür ederim: xaqpax

Yanlış anlamadıysam value si olan bir textarea için ilk açılışta imleci sona atıyor bu öyle değil mi?

Bu fonksiyonu her keyup vs.vs. durumlarında çalıştırırsam olur herhalde. Hemen deniyorum

evet tam olarak öyle kesinlikle çalışması gerekiyor...

xaqpax, çok teşekkür ederim, fonksiyon <textarea> de çalışıyor ama <div contenteditable="true"> de imleç gene başta kalıyor kaldıki başka başka sorunlardan dolayı contenteditable kullanmaktan vazgeçtim. Zaten kullanma amacım sadece yükseklik ayarını (div) olduğu için kendisi otomatik ayarlamasıydı. Tıpkı facebook gibi yazdıkça kendisi uzamasını istiyordum.

Facebook sorunu şöyle hallediyor. Div e click geldiğinde gizli bir textarea'ı focus ediyor sen ona yazıyorsun ama div içinde (clonlanmış) halini gösteriyor. Onu da denedim ama o iş bizim gibi deneyimi az olan birisi için çok uğraştırıcı. Yani sadece textarea'ı focus yap kişi yazsın bukadar basit değilmiş Facebook un java dökümanlarından bişey anlamak ta mümkün değil.

Bende el mahkum textarea kullanıp {resize:none} diyerekten yoluma devam ettim Jquery ile yazı sayısına göre otomatik height artırıyorum. En iyisi bildiğin yoldur deyip geçtim

Çok sağol

bi şekilde hallolmuş olsun da nasıl olursa olsun dediğinm gibi facebook ve google ın kaynak kodların birşey anlamak için napmak lazım onu ben de çözemedim