Textarea İmlecin Olduğu Konuma Veri Ekleme

İster text editör yapılmak istensin ister de başka türlü amaçlar olsun, textarea etiketindeki veriyi tamamen değiştirmek yerine sadece farenin tıklandığı bölgeye, imlecin olduğu konuma yazı eklenmek istenebilir.

Textarea istenilen konuma veri ekleme yapmak için öncelikle tıklanılan konumu bulmak gerekiyor. Yani imlecin bulunduğu konuma bir harf eklenmek istenirse bu eklenecek harf textarea da baştan itibaren kaçıncı harf olacak ise bu sayı değerini elde etmemiz gerekiyor.

Bu uygulamayı jquery kütüphanesi ile örneklendireceğim. O yüzden ilk olarak kütüphaneyi projeye dahil edelim.

Html etiketlerimizi görelim. Sınıfı tikla olan div etiketine tıklanıldığında textarea da istenilen yere yazı ekleme işlemini yapacağız.

Tikla



	

Ardından textarea da imlecin bulunduğu konumu elde edeceğimiz fonksiyonu script tagları içerisine olacak şekilde ekleyelim.

$.fn.getCursorPosition = function() {
	var el = $(this).get(0);
	var pos = 0;
	if('selectionStart' in el) {
		pos = el.selectionStart;
	} else if('selection' in document) {
		el.focus();
		var Sel = document.selection.createRange();
		var SelLength = document.selection.createRange().text.length;
		Sel.moveStart('character', -el.value.length);
		pos = Sel.text.length - SelLength;
	}
	return pos;
}

Devamında ise textarea etiketinde imlecin bulunduğu konumu bulup, bu konumdan önceki ve sonraki verileri javascript ile elde edip, bu 2 bölünmüş verinin arasına eklenmek istenilen yazıyı yazıp, bu düzenlenmiş içeriği textarea etiketine aktarıyoruz.

$(function(){
	$(".tikla").click(function(){
		var position = $("#myTextBoxSelector").getCursorPosition(); //textarea imlecin bulundugu konum
		var content = $("#myTextBoxSelector").val(); //textarea icerik
		var newContent = content.substr(0, position) + "text to insert" + content.substr(position); //istenilen konuma veriyi ekle
		$('#myTextBoxSelector').val(newContent); //duzenlenen icerigi textarea ya aktar
	});
});

Böylelikle textarea imlec konumuna veri ekleme işlemini en basit haliyle yapıyoruz. Buradan InsertAtCursorTextarea adlı dosyayı indirebilirsiniz.

Siteniz üzerinde hazır html editor kullanmak isterseniz CKEditor kullanımı konulu yazıma göz atabilirsiniz. Ayrıca yazı içerisinde CKEditor imlecin olduğu konuma veri ekleme konusundan da uygulamalı olarak bahsettim.