CP_textarea

Get textarea click row

by bryiantan

HTML

<div class="col-lg-4">
        <textarea readonly rows="15" cols="100" id="t" style="resize: none;overflow:auto;color:gray" ></textarea>
    </div>

JavaScript

function populate() {
	$('#t').text('');
	$('#t').append('1, king, kong\n');
  $('#t').append('2, donald, duck\n');
  $('#t').append('3, donkey, kong\n');
  $('#t').append('4, pac, man');

}

populate() ;

function getline()
{
    var t = $("#t")[0];
    //console.log(t.value.substr(0, t.selectionStart).split("\n").length);
    let rowNumber = t.value.substr(0, t.selectionStart).split("\n").length;
   // console.log(t.value.split("\n")[rowNumber-1]);
   //	alert(t.value.split("\n")[rowNumber-1]);
    
    /* If you want to prevent  something from happening went clicking 
    	on the empty space in the textarea, compare the selected position
      and the value length */
    if (t.value.length !== t.selectionStart) {
      console.log(t.value.split("\n")[rowNumber-1]);
      alert(t.value.split("\n")[rowNumber-1]);
    }
   
    //console.log(t.value.substr(0, t.selectionStart).split("\n"));
}

$("#t").click(function () {
            getline();
        });