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