インプットに入力された文字数を合計したい

Question

インプットに入力された文字数を合計したいです。
インプットには追加ボタンがありinput自体を追加していき各インプットの文字数を合計して
全てのインプットの文字数をリアルタイムで合計したいです。

一応下記のような形で各インプットの文字数は取得できているのですが
それを合計して<span class="all_txt"></span>へ出力する方法がわかりません。
（必要なのは合計数なので各インプット別の文字数は取得しなくても問題ないです）

<span class="all_txt">合計：0 文字</span>

<div class="hash">
<p class="add_area"><button type="button" class="add_hash_btn">追加</button></p>
<div class="hash_set_template"><div><input type="text"><span>各0</span></div></div>
</div>

  $('.add_hash_btn').click(function (e) {
    e.preventDefault();
    var html = $('.hash_set_template').html();
    var hash_set_t = $.parseHTML(html);
    var append = $(this).parent('.add_area');
    append.before(hash_set_t);
  });

$(document).on("keyup change",".hash input",function(){
  $(this).each(function(){
  var count = $(this).val().length;
    $(this).next("span").text(count)
      })
});

Answer 1

こんにちは

ご質問に

（必要なのは合計数なので各インプット別の文字数は取得しなくても問題ないです）

とあったので、HTMLを以下のように修正して、各 input の文字数を表示しないようにしました。

<span class="all_txt">合計：0 文字</span>

<div class="hash">
    <p class="add_area"><button type="button" class="add_hash_btn">追加</button></p>
    <div class="hash_set_template"><div><input type="text"></div></div>
</div>

JS では、各 input の value の長さを合計して、.all_txt のテキストを変更する関数を追加して、これをkeyup と input のハンドラに設定するように修正します。

const updateTotal = () => {
    const total = $('.hash > div > input')
        .toArray()
        .reduce((sum, e) => sum + e.value.length, 0);

    $('.all_txt').text(`合計： ${total} 文字`);
}

$(document).on("keyup change", ".hash input", updateTotal);

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/rNNVZWB?editors=1010

以上、参考になれば幸いです。

Comments

[kyoya0819]

横槍すみません。
サンプル拝見させていただきましたが、既表のボックスの文字数が計算されていません。

[sense6n23rp]

ありがとうございます
できました。

[jun68ykt]

@ense6n23rpさん
どういたしまして。
> できました。
とのことで、よかったです。

@asuchi0819さん
当方の拙いサンプルをご覧頂き、ありがとうございます。
確認ですが、コメントにある
> 既表のボックス
とは、どの要素のことでしょうか？

[kyoya0819]

<input type="text"><span>各0</span>という要素を指しています。
ページ表示時に初期表示のinputボックスのことです。

[jun68ykt]

@asuchi0819さん
ご指摘の意味を理解できたので返答します。

> ページ表示時に初期表示のinputボックス

に入力されたテキストも、文字数合計時に含めるのかどうかについては、私も回答時に検討しました。

したがって、回答に挙げているコード
https://codepen.io/jun68ykt/pen/rNNVZWB?editors=1010

において、文字数をカウントする対象となる input を指定するために、

$('.hash > div > input')

としている部分も、当初は単に

$('input')

としていましたが、検討の結果

> ページ表示時に初期表示のinputボックス

は、文字数合計には含めないようにするために

$('.hash > div > input')

のほうを採用しました。
その検討の内容は以下です。

> ページ表示時に初期表示のinputボックス

は、以下のように

<div class="hash_set_template"><div><input type="text"><span>各0</span></div></div>

という <div> に囲まれていますが、一番外側の <div> の class　が

hash_set_template

となっています。このクラス名はアンダースコアで
hash, set, template
という３つの英単語が連結されて構成されていますが、最後の
template
という英単語を私の手元にあるオックスフォード現代英英辞典でひくと、以下のようになっていました。

1. a shape cut of a hard material, used as a model for producing exactly the same shape many times in another material

2. a thing that is used as a model for producing other similar examples

上記をふまえ、日本語だと template は多くの場合、 "ひな形" と和訳されますが、質問者の sense6n23rpさんが、この、末尾が " _template" であるクラス名をつけた意図としては、

<div class="hash_set_template"><div><input type="text"><span>各0</span></div></div>

に囲まれている input はひな形で、「追加」がクリックされたときのコピー元として使うだけで、入力フィールドとして実際に使うのはコピーによって作られた input のほうだけ、という意味合いが込められているものと勘案し、そのために単に

$('input')

とするか

$('.hash > div > input')

とするかを考えた際に、よりhash_set_template というクラス名の意図に沿った後者とした次第です。
上記のような経緯によって、

> ページ表示時に初期表示のinputボックス

は文字数のカウントから、意図して外したということをご理解頂けましたら、幸甚に存じます。

[kyoya0819]

了解しました。
お手数おかけしました。

Answer 2

テキストボックス個々にIDを振って、入力時に全ての値を結合し文字数を計測する方法が単純でいい気がします。

Answer 3

$( document ).on( "keyup change", ".hash input", function() {
	// $( this ).each( function() { // ← 特に意味がないので削除
		var count = $( this ).val().length;
		$( this ).next( "span" ).text( count );
	// } ); // ← 〃
	var total = 0;
	$( ".hash input" ).each( function() {
		total += $( this ).val().length;
	} );
	$( ".all_txt" ).html( "合計：" + total + " 文字" );
} ); // 未テスト

Comments

[miyabi_pudding]

横槍すみません。
documentにキーイベント入れるスマートさに惚れ惚れしました。
さすがです・・・。

[sense6n23rp]

ありがとうございます。
整形したところ（//を消しました）こちらが単純で分かりやすかったので助かりました

[sense6n23rp]

ただ文字数の計算を半角全角で分ける必要が出てきてしまして

$(document).on("keyup change",".hash input",function(){
var o = $(this);
var str = o.val();
var r = 0;
for (var i = 0; i < str.length; ++i) {
var c = str.charCodeAt(i);
if (c >= 0x0 && c <= 0x7f) {
r += 1;
} else {
r += 2;
}
}
var all = r/2
var total = 0;
$( ".hash input" ).each( function() {
total += all
} )
$( ".all_txt" ).text(total);
});

としたのですが足された数値がおかしくなってしました。

[sense6n23rp]

たびたびすいません。
追加したinputをremove()した場合に入力してあった文字数を合計から引く場合はどうしたらよいでしょうか？

[kei344]

To: miyabi_takatsukさん
質問文にあったものですよ。

To: sense6n23rpさん
> 数値がおかしくなってしました。
「文字を数える処理」を関数化しましょう。

$( document ).on(/*略*/);
function moji( text ) {
var count = 0;
// 文字を数える処理
return count;
}

上記のように関数を用意して、
var count = $( this ).val().length;
を
var count = moji( $( this ).val() );
に、
total += $( this ).val().length;
を
total += moji( $( this ).val() );
にすれば（文字を数える処理に問題がなければ）できると思います。

[kei344]

To: sense6n23rpさん
> inputをremove()した場合
削除する処理の最後に下記を追加。
$( document ).trigger( "keyup" );

【.trigger() | jQuery API Documentation】
https://api.jquery.com/trigger/

[miyabi_pudding]

kei344さん>大変失礼しました。

sense6n23rpさん>すばらしい構文だと思いました。非常に勉強になりました！

[sense6n23rp]

色々とやってみたのですが詰まってしまいました
別の質問で再度立てますね