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

# 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

```javascript: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

```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);
```