/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
textarea {
  width: 200px;
  height: 200px;
  font-family: arial;
}
</style>
</head>
<body>
  <textarea id=t>This sentence has no line break but is on two lines.
This makes it harder to always find on what line the caret is.</textarea>
  <br>The goal is to fix the following values :
  <br>On first line : <span id=f></span>
  <br>On last line : <span id=l></span>
<script id="jsbin-javascript">
var $t = $('#t'),
    debug = true; // set this to true to see what happens

var $d = $('<div>').appendTo('body'),
    $s1 = $('<span>').text('a').appendTo($d),
    $s2 = $('<span>').appendTo($d);

$d.css({
  width:$t.width(),
  height:$t.height(),
  font:$t.css('font'),
  fontFamily:$t.css('fontFamily'), // for FF/linux
  fontSize:$t.css('fontSize'),
  whiteSpace : 'pre-wrap',
  wordWrap : 'break-word',
  overflowY: 'auto',
  position: 'fixed',
  bottom: 0,
  left: debug ? 0 : 5000,
  zIndex: 100
});

var lh = $s1.height();

function update(){
  var se = this.selectionEnd,
      v = this.value
  $s1.text(v.slice(0, se));
  $s2.text(v.slice(se));
  var isOnFirstLine = this.selectionEnd===0 || ($s1.height()===lh && $s1.offset().top==$s2.offset().top);
  var isOnLastLine = $s2.height()===lh;
  $('#f').text(isOnFirstLine);
  $('#l').text(isOnLastLine);
}
$('#t').on('keyup click', update);
update.call(document.getElementById('t'));

if (debug) {
 $d.css('background','yellow');
 $s1.css('background','blue');
 $s2.css('background','green');
}
</script>


<script id="jsbin-source-css" type="text/css">textarea {
  width: 200px;
  height: 200px;
  font-family: arial;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var $t = $('#t'),
    debug = true; // set this to true to see what happens

var $d = $('<div>').appendTo('body'),
    $s1 = $('<span>').text('a').appendTo($d),
    $s2 = $('<span>').appendTo($d);

$d.css({
  width:$t.width(),
  height:$t.height(),
  font:$t.css('font'),
  fontFamily:$t.css('fontFamily'), // for FF/linux
  fontSize:$t.css('fontSize'),
  whiteSpace : 'pre-wrap',
  wordWrap : 'break-word',
  overflowY: 'auto',
  position: 'fixed',
  bottom: 0,
  left: debug ? 0 : 5000,
  zIndex: 100
});

var lh = $s1.height();

function update(){
  var se = this.selectionEnd,
      v = this.value
  $s1.text(v.slice(0, se));
  $s2.text(v.slice(se));
  var isOnFirstLine = this.selectionEnd===0 || ($s1.height()===lh && $s1.offset().top==$s2.offset().top);
  var isOnLastLine = $s2.height()===lh;
  $('#f').text(isOnFirstLine);
  $('#l').text(isOnLastLine);
}
$('#t').on('keyup click', update);
update.call(document.getElementById('t'));

if (debug) {
 $d.css('background','yellow');
 $s1.css('background','blue');
 $s2.css('background','green');
}</script></body>
</html>

## jsbin.qifezupu.css
textarea {
  width: 200px;
  height: 200px;
  font-family: arial;
}

## jsbin.qifezupu.js
var $t = $('#t'),
    debug = true; // set this to true to see what happens

var $d = $('<div>').appendTo('body'),
    $s1 = $('<span>').text('a').appendTo($d),
    $s2 = $('<span>').appendTo($d);

$d.css({
  width:$t.width(),
  height:$t.height(),
  font:$t.css('font'),
  fontFamily:$t.css('fontFamily'), // for FF/linux
  fontSize:$t.css('fontSize'),
  whiteSpace : 'pre-wrap',
  wordWrap : 'break-word',
  overflowY: 'auto',
  position: 'fixed',
  bottom: 0,
  left: debug ? 0 : 5000,
  zIndex: 100
});

var lh = $s1.height();

function update(){
  var se = this.selectionEnd,
      v = this.value
  $s1.text(v.slice(0, se));
  $s2.text(v.slice(se));
  var isOnFirstLine = this.selectionEnd===0 || ($s1.height()===lh && $s1.offset().top==$s2.offset().top);
  var isOnLastLine = $s2.height()===lh;
  $('#f').text(isOnFirstLine);
  $('#l').text(isOnLastLine);
}
$('#t').on('keyup click', update);
update.call(document.getElementById('t'));

if (debug) {
 $d.css('background','yellow');
 $s1.css('background','blue');
 $s2.css('background','green');
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	textarea {
	width: 200px;
	height: 200px;
	font-family: arial;
	}
	</style>
	</head>
	<body>
	<textarea id=t>This sentence has no line break but is on two lines.
	This makes it harder to always find on what line the caret is.</textarea>
	<br>The goal is to fix the following values :
	<br>On first line : <span id=f></span>
	<br>On last line : <span id=l></span>
	<script id="jsbin-javascript">
	var $t = $('#t'),
	debug = true; // set this to true to see what happens

	var $d = $('<div>').appendTo('body'),
	$s1 = $('<span>').text('a').appendTo($d),
	$s2 = $('<span>').appendTo($d);

	$d.css({
	width:$t.width(),
	height:$t.height(),
	font:$t.css('font'),
	fontFamily:$t.css('fontFamily'), // for FF/linux
	fontSize:$t.css('fontSize'),
	whiteSpace : 'pre-wrap',
	wordWrap : 'break-word',
	overflowY: 'auto',
	position: 'fixed',
	bottom: 0,
	left: debug ? 0 : 5000,
	zIndex: 100
	});

	var lh = $s1.height();

	function update(){
	var se = this.selectionEnd,
	v = this.value
	$s1.text(v.slice(0, se));
	$s2.text(v.slice(se));
	var isOnFirstLine = this.selectionEnd===0 \|\| ($s1.height()===lh && $s1.offset().top==$s2.offset().top);
	var isOnLastLine = $s2.height()===lh;
	$('#f').text(isOnFirstLine);
	$('#l').text(isOnLastLine);
	}
	$('#t').on('keyup click', update);
	update.call(document.getElementById('t'));

	if (debug) {
	$d.css('background','yellow');
	$s1.css('background','blue');
	$s2.css('background','green');
	}
	</script>


	<script id="jsbin-source-css" type="text/css">textarea {
	width: 200px;
	height: 200px;
	font-family: arial;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var $t = $('#t'),
	debug = true; // set this to true to see what happens

	var $d = $('<div>').appendTo('body'),
	$s1 = $('<span>').text('a').appendTo($d),
	$s2 = $('<span>').appendTo($d);

	$d.css({
	width:$t.width(),
	height:$t.height(),
	font:$t.css('font'),
	fontFamily:$t.css('fontFamily'), // for FF/linux
	fontSize:$t.css('fontSize'),
	whiteSpace : 'pre-wrap',
	wordWrap : 'break-word',
	overflowY: 'auto',
	position: 'fixed',
	bottom: 0,
	left: debug ? 0 : 5000,
	zIndex: 100
	});

	var lh = $s1.height();

	function update(){
	var se = this.selectionEnd,
	v = this.value
	$s1.text(v.slice(0, se));
	$s2.text(v.slice(se));
	var isOnFirstLine = this.selectionEnd===0 \|\| ($s1.height()===lh && $s1.offset().top==$s2.offset().top);
	var isOnLastLine = $s2.height()===lh;
	$('#f').text(isOnFirstLine);
	$('#l').text(isOnLastLine);
	}
	$('#t').on('keyup click', update);
	update.call(document.getElementById('t'));

	if (debug) {
	$d.css('background','yellow');
	$s1.css('background','blue');
	$s2.css('background','green');
	}</script></body>
	</html>