2015.
02.
21
13:03:55
結論から書けば
で取得できました。
あっ、これだけなのですね（＾＾；
やっべ、特に説明することが無いや（－－；
と、取りあえず、サンプルを置いておきますね。
まずはテキストボックスの文字数を数えて表示するサンプルですφ（－－）
テキストボックスでキーボードをペチペチしたときに
内容を取得して、文字数を数えて、画面に表示しています。
jQueryを使っているのは私が慣れているからです。
特に必須というわけではありませんので、
使いたくなければ使わなくても大丈夫です。
このサンプルのテキストボックスをテキストエリアに変えると、こうなりますφ（－－）
主要なコード自体は同じですね。
ただし（－－）ｂ
このままだと、改行も1文字と数えてしまいます。
それでも良い方は別に気にしないでください。
私は改行を数えたくなかったので、こんな風にしましたφ（－－）
はい、改行を除去した状態で文字数を数えています。
※改行の除去について説明が必要な方は「JavaScript、文字列の改行を削除する」の記事をご覧ください。
いずれにせよ文字数のカウント自体は
です。
あとは、どのような状態（改行除去とか）をカウントしたいかによって、
変数の中身を事前にあれこれしておけば良いと思います。
そんな感じ＼（－－）／
変数.length
で取得できました。
あっ、これだけなのですね（＾＾；
やっべ、特に説明することが無いや（－－；
と、取りあえず、サンプルを置いておきますね。
まずはテキストボックスの文字数を数えて表示するサンプルですφ（－－）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>JavaScript、文字数カウントテスト</title>
<script type="text/javascript">
<!--
$(document).ready(function(){
//テキストボックスでキーを押したり離したり変更したりしたとき
$('#input_area').bind('keydown keyup keypress change',function(){
//テキストボックスの内容を取得
var str01 = $(this).val();
//文字数をカウントして、画面に表示
$('#cnt').html(str01.length);
});
});
// -->
</script>
</head>
<body>
<input type="text" id="input_area" size="50">
<p><span id="cnt">0</span>文字</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>JavaScript、文字数カウントテスト</title>
<script type="text/javascript">
<!--
$(document).ready(function(){
//テキストボックスでキーを押したり離したり変更したりしたとき
$('#input_area').bind('keydown keyup keypress change',function(){
//テキストボックスの内容を取得
var str01 = $(this).val();
//文字数をカウントして、画面に表示
$('#cnt').html(str01.length);
});
});
// -->
</script>
</head>
<body>
<input type="text" id="input_area" size="50">
<p><span id="cnt">0</span>文字</p>
</body>
</html>
テキストボックスでキーボードをペチペチしたときに
内容を取得して、文字数を数えて、画面に表示しています。
jQueryを使っているのは私が慣れているからです。
特に必須というわけではありませんので、
使いたくなければ使わなくても大丈夫です。
このサンプルのテキストボックスをテキストエリアに変えると、こうなりますφ（－－）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>JavaScript、文字数カウントテスト</title>
<script type="text/javascript">
<!--
$(document).ready(function(){
//テキストエリアでキーを押したり離したり変更したりしたとき
$('#input_area').bind('keydown keyup keypress change',function(){
//テキストエリアの内容を取得
var str01 = $(this).val();
//文字数をカウントして、画面に表示
$('#cnt').html(str01.length);
});
});
// -->
</script>
</head>
<body>
<textarea id="input_area" col="10" row="3"></textarea>
<p><span id="cnt">0</span>文字</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>JavaScript、文字数カウントテスト</title>
<script type="text/javascript">
<!--
$(document).ready(function(){
//テキストエリアでキーを押したり離したり変更したりしたとき
$('#input_area').bind('keydown keyup keypress change',function(){
//テキストエリアの内容を取得
var str01 = $(this).val();
//文字数をカウントして、画面に表示
$('#cnt').html(str01.length);
});
});
// -->
</script>
</head>
<body>
<textarea id="input_area" col="10" row="3"></textarea>
<p><span id="cnt">0</span>文字</p>
</body>
</html>
主要なコード自体は同じですね。
ただし（－－）ｂ
このままだと、改行も1文字と数えてしまいます。
それでも良い方は別に気にしないでください。
私は改行を数えたくなかったので、こんな風にしましたφ（－－）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>JavaScript、文字数カウントテスト</title>
<script type="text/javascript">
<!--
$(document).ready(function(){
//テキストエリアでキーを押したり離したり変更したりしたとき
$('#input_area').bind('keydown keyup keypress change',function(){
//テキストエリアの内容を取得
var str01 = $(this).val();
//改行を削除
str01 = str01.replace(/\r?\n/g,"");
//文字数をカウントして、画面に表示
$('#cnt').html(str01.length);
});
});
// -->
</script>
</head>
<body>
<textarea id="input_area" col="10" row="3"></textarea>
<p><span id="cnt">0</span>文字</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>JavaScript、文字数カウントテスト</title>
<script type="text/javascript">
<!--
$(document).ready(function(){
//テキストエリアでキーを押したり離したり変更したりしたとき
$('#input_area').bind('keydown keyup keypress change',function(){
//テキストエリアの内容を取得
var str01 = $(this).val();
//改行を削除
str01 = str01.replace(/\r?\n/g,"");
//文字数をカウントして、画面に表示
$('#cnt').html(str01.length);
});
});
// -->
</script>
</head>
<body>
<textarea id="input_area" col="10" row="3"></textarea>
<p><span id="cnt">0</span>文字</p>
</body>
</html>
はい、改行を除去した状態で文字数を数えています。
※改行の除去について説明が必要な方は「JavaScript、文字列の改行を削除する」の記事をご覧ください。
いずれにせよ文字数のカウント自体は
変数.length
です。
あとは、どのような状態（改行除去とか）をカウントしたいかによって、
変数の中身を事前にあれこれしておけば良いと思います。
そんな感じ＼（－－）／
category:● JavaScript thema:パソコンな日々 - genre:コンピュータ Posted by ササキマコト