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

  • 0
    いいね
  • 0
    コメント

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

    仕様

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

    ソース(1)

    HTML

    <html>
    <head>
    <script type="text/javascript" src="test_1_1.js"></script>
    <title>test_1_1: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を掴んでから、イベントを割り当てる

    test_1_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)と同じ

    <html>
    <head>
    <script type="text/javascript" src="test_1_2.js"></script>
    <title>test_1_2: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にイベントを割り当てておいて、セレクタの条件をあとからチェックする

    test_1_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

    test_1_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="test_1_3.js"></script>
    <title>test_1_3: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

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