textareaのカーソル位置と内容確認

仕様

textareatのカーソル位置（行数）を確認する
マウスでクリックした場合、もしくはtextarea内でキーボードで移動した場合常に状態を表示する

ソース(1)

HTML

test001_1.htm

<html>
<head>
<script type="text/javascript" src="test001_1.js"></script>
<title>textareaのカーソル位置と内容確認(1)</title>
</head>
<body>
<p>row：<input type="text" name="row"></p>
<p>content：<input type="text" name="content"></p>
<textarea cols="30" rows="10">
aaa
bbb ccc ddd

eee
fff


</textarea>
</body>
</html>

javascript

selectorを掴んでから、イベントを割り当てる

test001_1.js

window.addEventListener('DOMContentLoaded',function(e){
  Array.prototype.map.call(document.querySelectorAll('textarea'),function(i){
    var events='keyup click';
    events.trim().split(/\s+/).map(function(j){
      i.addEventListener(j,function(e){
        var t=e.target;
        var v= t.value;
        var selin = t.selectionStart;
        var v1=v.substr(0,selin);
        var v2=v.substr(selin);
        var row=((m=v1.match(/\n/g))?m.length+1:1);
        document.querySelector('[name=row]').value=row;
        var content=(v1.match(/^$|\n$/g) && v2.match(/^\n|^$/g))?"empty":"not empty";
        document.querySelector('[name=content]').value=content;
      });
    });
  });
});

ソース(2)

HTML

※基本的にはHTMLはソース(1)と同じ

test001_2.htm

<html>
<head>
<script type="text/javascript" src="test001_2.js"></script>
<title>textareaのカーソル位置と内容確認(2)</title>
</head>
<body>
<p>row：<input type="text" name="row"></p>
<p>content：<input type="text" name="content"></p>
<textarea cols="30" rows="10">
aaa
bbb ccc ddd

eee
fff


</textarea>
</body>
</html>

javascript

documentにイベントを割り当てておいて、セレクタの条件をあとからチェックする

test001_2.js

var events='keyup click';
events.trim().split(/\s+/).map(function(j){
  document.addEventListener(j,function(e){
    var t=e.target;
    if(t.nodeName==="TEXTAREA"){
      var v= t.value;
      var selin = t.selectionStart;
      var v1=v.substr(0,selin);
      var v2=v.substr(selin);
      var row=((m=v1.match(/\n/g))?m.length+1:1);
      document.querySelector('[name=row]').value=row;
      var content=(v1.match(/^$|\n$/g) && v2.match(/^\n|^$/g))?"empty":"not empty";
      document.querySelector('[name=content]').value=content;
    }
  });
});

ソース(3)

※jQuery版

HTML

test001_3.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test001_3.js"></script>
<title>textareaのカーソル位置と内容確認(3)</title>
</head>
<body>
<p>row：<input type="text" name="row"></p>
<p>content：<input type="text" name="content"></p>
<textarea cols="30" rows="10">
aaa
bbb ccc ddd

eee
fff


</textarea>
</body>
</html>

jQuery

test001_3.js

$(function(){
  $('textarea').on('keyup click',function(e){
    var v= $(this).val();
    var selin = $(this).prop('selectionStart');
    var v1=v.substr(0,selin);
    var v2=v.substr(selin);
    var row=((m=v1.match(/\n/g))?m.length+1:1);
    $('input[name=row]').val(row);
    var content=(v1.match(/^$|\n$/g) && v2.match(/^\n|^$/g))?"empty":"not empty";
    $('input[name=content]').val(content);
  });
});

関連

カーソル位置だけではなく、選択範囲がある場合は後ろもつかむこと

javascript

    var selin = target.prop('selectionStart');
    var selout = target.prop('selectionEnd');
    var v1=v.substr(0,selin);
    var v2=v.substr(selin,selout-selin);
    var v3=v.substr(selout);