Bu dersimizde javascript de bir biriyle kullanılan 3 fonksiyonu anlatacağım.Bunlar
selectionStart,selectionEnd ve
substring.Şimdi bunları tek tek açıklayıp örnek yapalım.
İndir : http://ustaderslik.com/dosya/JavaScript%20selectionStart%20-%20selectionEnd%20-%20substring%20Kullanımı.zip
1-selectionStart
SelectionStart textareada seçilen metnin baş noktasını veya textarea içinde bulunan imleç konumunu bize verir.Konum olarak en baştaki karakterden seçimin başladığı yere olan karakterlerin sayısını veriyor.
var st=document.getElementById("textarea").selectionStart;
Bu şekilde textareaya erişip selectionStart konumunu alıyoruz.Javascript ile erişmemiz gerekiyor,jquery ile denersek olmayacaktır.
2-selectionEnd
SelectionEnd ise textarea da seçilen metnin bitiş konumunu veriyor.Yani seçilen metin en baştaki karakterden ona olan karakterlerin sayısı.
var se=document.getElementById("textarea").selectionEnd;
Bu şekilde değeri alıp değişkene atayabiliriz.
3-substring(konum-1,konum-2)
Substring ise belirlenen 2 karakter arasını alır.Örnek olarak selectionStartla başlama konumunu aldık 10 diyelim.SelectionEnd ile seçili metnin bitiş noktasını aldık diyelim 15
var bul=$("#textarea").val().substring(10,15);
dediğimizde aradaki 5 karakteri bize verecektir.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("#ekle").click(function(){
var ilk=document.getElementById("area").selectionStart,//başlama konumu
bitis=$("#area").val().length,//toplam karakter sayısı.bu bize bitiş noktasını verir.
metin="cArleone",//eklenecek metin.
eklenecek=$("#area").val().substring(0,ilk)+metin+$("#area").val().substring(ilk,bitis);
//0 ile ilk arasını alıp imleçten önceki metni buldum.metni sonuna ekledik sonra imleçten bitişe kadar olan metni bulup,eklediğimiz metnin sonuna ekledik
$("#area").val(eklenecek)//yeni oluşan metnimizi textareaya ekledik.
})
$("#bul").click(function(){
var ilk=document.getElementById("area").selectionStart,//başlama konumu
son=document.getElementById("area").selectionEnd,//bitiş konumu
bul=$("#area").val().substring(ilk,son);//2 konum arasını bul.
alert(bul)
})
})
</script>
</head>
<body>
<button id="ekle">İmleç konumuna metin ekle</button>
<button id="bul">Seçili metni göster</button>
<br />
<textarea id="area" cols="30" rows="10" value="UstaDerslik"></textarea>
</body>
</html>
UstaDerslik
