Form vermeden ÖNCE textarea'daki yeni satırları okuyun.

Question

Öznitelik wrap = "sabit" bir textarea'm var, yani sunucuya gönderdikten sonra satır sonu (yeni satırlar) elde edebilmem gerekir - bu işe yarar. Ama yapmak istediğim, gönderiminden önce tarafından oluşturulan yeni satırları elde etmektir.

Neden? Çünkü şu anda görünür olan satırları saymak istiyorum. Ve şimdi taşıma dönüş satırlarından bahsetmiyorum. Textarea'nın genişliğini (veya cols değerini ayarlayarak) sınırlandırarak oluşturulan satırlardan bahsediyorum. tarayıcıda

<textarea id="myarea" name="myarea" cols="35" rows="10" wrap="hard"> 
    Some example text here. Hello my name is something I should be able to blabla. 
</textarea> 

Çıktı: Burada
Bazı örnek metin

Bu metin kutusu var. Merhaba benim adım
bir şey blabla mümkün olmalıdır. ..
$ ('# myarea') html() bölünmüş ("\ n") uzunluk
$ ('# myarea'):. = 2

denedim

satırlar .val(). bölünmüş ("< br> "). uzunluğu
$ ('# myarea'). val(). bölünmüş (" \ r"). uzunluğu
Ve birkaç daha fazla kombinasyon ...

Fakat hiçbiri işe yaramıyor. Her karakteri sayan ve sonra yeni bir satır oluşturan bir senaryo yazmadan mümkün olan şey nedir? Bunun otomatik olarak gerçekleşeceğini umuyordum ...

Eğer bu mümkün değilse, sunucu yeni satırları neden yorumlayamaz (yorumlayamaz)?

Teşekkürler!

Answer 1

görünüyor kullanarak, düğme onClick gönderin. Ama biz hesaplayabiliriz. Textarea'daki satır yüksekliğinin bilinen bir değer olduğunu varsayalım (bunu css'de açıkça tanımlayabilirsiniz). kod hesaplamak için Yani satır sayısı bu istiyorum:

var area = $('#myarea').get(0); 

    //save the initial height of textarea 
    var initialHeight = area.style.height; 

    //set the height to 0 so scrollHeight will always return dynamic height 
    area.style.height = '0px'; 

    //here we assume that the line-height equals to 15 
    var numberOfRows = Math.floor(area.scrollHeight/15); 

    //restore textarea height 
    area.style.height = initialHeight; 

    console.log(numberOfRows); 

ömeği

Sadece benim koduyla Chrome'da hata anladım http://jsfiddle.net/J5UpF/

UPDATE çalışmak. Textarea'nın sağ tarafında görünen kaydırma çubuğunu hesaba katmadım. Bu bazen hesaplanan yanlış sayıda satır yol açar. Ancak Firefox'ta bir çekicilik gibi çalışır.http://jsfiddle.net/J5UpF/3/

GÜNCELLEME Chrome'da yeni müthiş hata

olan 2

var area = $('#myarea').get(0); 
var $area = $('#myarea'); 

//save the initial height of textarea 
var initialHeight = area.style.height; 

var scrollbarWidthInitial = area.offsetWidth - area.clientWidth; 

//set the height to 0 so scrollHeight will always return dynamic height 
area.style.height = '0px'; 

var scrollbarWidth = area.offsetWidth - area.clientWidth; 
var scrollbarWidthDiff = scrollbarWidth - scrollbarWidthInitial; 
$area.width($area.width() + scrollbarWidthDiff); 

//here we assume that the line-height equals to 15 
var numberOfRows = Math.floor(area.scrollHeight/15); 

//restore textarea height 
area.style.height = initialHeight; 
$area.width($area.width() - scrollbarWidthDiff); 

console.log(numberOfRows); 

güncellenmiş örnek: Biz kaydırma çubukları genişliğinin farkı hesaplamak ve buna göre textarea genişliğini ayarlamak zorunda Bu sorunu çözmek için keşfedildi! Chrome, placeholder özniteliğini kullanırken, yer tutucu metni için satır sayısını hesaplar. Çözüm basittir: sadece bazı verileri textarea'ya girdiğinizde ve veri temizlendiğinde geri yüklediğinizde yer tutucu özniteliğini yedekleyin.

Güncelleme örnek http://jsfiddle.net/J5UpF/4/

Answer 2

Üzerinde jquery bağlamak olabilir o zaman bu değeri elde etmek araçlarında hiçbir yapı var gibi

$('#myarea').val().split("\n").length