JavaScript selectionStart - selectionEnd - substring Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

JavaScript selectionStart - selectionEnd - substring Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2047)
RAPOR ET
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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol