

テキストエリアの文字カウンターで躓いております。ご助力を頂ければと思います。

先ず条件ですが、

1：半角は0.5、全角は1.0としてカウントする  
2：改行、スペースはカウントしない  
3：３行目まで１行ごとにカウントする（４行目以降は無視）

現在の問題点  
半角と全角の判定が無視されているようで半角でも1.0としてカウントされてしまいます。

以上になります。

[code]

    function ShowLength( str ) {
      var len = 0;
    
    //文字サイズのチェック
      for(i=0;i<str.length;i++) {
        var c = str.charCodeAt(i);
      
        if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)){
          len += 0.5;
        }
        else { len += 1; }
      }
      
    
    //分割
      var arr = str.split(/\r\n|\r|\n/);
      
      for(i=0;i<arr.length;i++){
    //    log確認用
        console.log("arr["+i+"]の文字数は"+arr[i].length+"です");
      }
      
      
      
        ShowLength.innerHTML = len.toFixed(1);
    
        document.getElementById("inputlength01").innerHTML = arr[0].length;
        document.getElementById("inputlength02").innerHTML = arr[1].length;
        document.getElementById("inputlength03").innerHTML = arr[2].length;
    }
[/code]

[code]

    <body>
      <table>
        <tr>
        <th>行別カウンター</th>
        <td>
          <textarea id="input_text" placeholder="" name="summary" rows="5" onkeyup="ShowLength(this.value,'inputlength');"></textarea>
            <div class="countWrrap">
              <div class="countDsign">
                <ul>
                  <li id="comment01">1行目： <span id="inputlength01">0.0 </span>/ 35</li>
                  <li id="comment02">2行目： <span id="inputlength02">0.0 </span>/ 35</li>
                  <li id="comment03">3行目： <span id="inputlength03">0.0 </span>/ 35</li>
                </ul>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </body>
[/code]


CC BY-SA 3.0
2017-09-21T03:44:04.710
38081
2017-09-21T04:23:38.350
2017-09-21T04:11:24.047
25494
25494
question
javascript html jquery
テキストエリアの文字数を１行ごとにカウントさせたい

[code]

    document.getElementById("inputlength01").innerHTML = arr[0].length;
    
[/code]

ここで結局`arr[0].length`を使ってるので、

[code]

    var len = 0;
    
    //文字サイズのチェック
    for(i=0;i<str.length;i++) {
      var c = str.charCodeAt(i);
    
      if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)){
        len += 0.5;
      }
      else { len += 1; }
    }
    
[/code]

で計算した長さ`len`がなにも意味をなしていません。

もう一つ、

[code]

    ShowLength.innerHTML = len.toFixed(1);
    
[/code]

は何も意味がないと思います。`ShowLength`は関数ですから、そのプロパティに値を入れたところで画面上には何も起こりません。

最後に、`element.innerHTML`は代入された文字列をHTMLとしてパースするのでこの場合無駄です。代わりに`element.textContent`を使用することをおすすめします。


CC BY-SA 3.0
2017-09-21T04:23:38.350
38085
2017-09-21T04:23:38.350
20206
38081
answer