JavaScript初心者のための文字数カウンタ作成方法
- JavaScriptを使用して、文字数カウンタを作成する方法について説明します。
- 提供されたコードでは、コピペした場合にカウントがされない問題があります。この問題を解決するために、setIntervalを使用してカウントを行う方法を説明します。
- 具体的な手順としては、setIntervalを使用して一定の時間ごとにカウントを更新する関数を作成し、その関数をsetIntervalに渡すことが必要です。
- ベストアンサー
文字数カウンタにsetIntervalを使うには
JavaScript初心者です。 JavaScriptで残り入力可能文字数を表示するカウンタを作成したのですが 以下のプログラムだとコピペしたときカウントがされません。 そこでsetIntervalを使ってカウントできるようにしたいのですがどのように 「変数(省略可) = setInterval(関数名,ミリ秒)」 を流用すればよいのかイマイチわかりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> <script type="text/javascript"><!-- function ShowLength( str ) { document.getElementById("inputlength").innerHTML = 20 - str.length + "文字入力できます"; } // --></script> </head> <body> <input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(value)"><br /> あと<a id="inputlength">20文字入力できます</a> </body> </html> よろしくお願いします。
- shorinji36
- お礼率83% (1150/1380)
- JavaScript
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
解決したのかどうかよくわからないので… ご参考までに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div> <input type="text" name="title" size="50" maxlength="20"> <p> あと<span id="inputlength">20</span>文字入力できます </p> </div> <script type="text/javascript"> <!-- (function(){ var intervalId = setInterval(function(){ var n = 20 - document.getElementsByName("title")[0].value.length; if(n<0) n = 0; document.getElementById("inputlength").innerHTML = n; }, 100); })(); //--> </script> </body> </html>
その他の回答 (6)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
>No.5 お礼 >var tm タイマーを止めたいときに使います。 タイマーを止める必要がなければ無視して下さい。 使い方は解説サイトや解説書などに、setIntervalやsetTimeoutの関連項目として書かれていると思います。
お礼
再度、回答有難うございます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
var tm=setInterval( function(){ShowLength(document.getElementsByName('title')[0].value);}, 10 ); すみません、間違えました。 getElementsByTagNameではなく、getElementsByNameです。
お礼
回答有難うございます。 すいませんが初心者なもので "var tm" で定義した変数をどのように扱えばよいのかわかりません。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
onchangeはフォーカスをはずれないとイベントが発生しないブラウザもあります。 key****ではキーボードから入力しないコピーペースト、ソフトウェアキーボードや手書き入力に反応しませんし、 （昔は日本語入力の漢字変換で文字数が違っていましたし、） 文字数チェックはタイマーが基本だと思います。 var tm=setInterval( function(){ShowLength(document.getElementsByTagName('title')[0].value);}, 10 ); 未検証です。
お礼
回答有難うございます。
- yambejp
- ベストアンサー率51% (3827/7415)
#1ですが・・・あれ？できません？ <script type="text/javascript"> function ShowLength(str) { document.getElementById("inputlength").innerHTML = 20 - str.length + "文字入力できます"; } </script> <input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(this.value)" onchange="ShowLength(this.value)"><br /> あと<a id="inputlength">20文字入力できます</a>
お礼
回答有難うございます。 #4さんが書かれているように"onchange"はIE8ではカーソルが外れないとダメでした。 代わりに"onmouseout","onmousemove"で試したところコピペでもカウントされました。
- babu_baboo
- ベストアンサー率51% (268/525)
<p> <input type="text" id="title1" name="title" size="50" maxlength="20"> あと<span id="inputlength1">20</span>文字入力できます </p> <p> <input type="text" id="title2" name="title" size="50" maxlength="15"> あと<span id="inputlength2">15</span>文字入力できます </p> <script> function lengthCounter (node, max) { max = Number (node.maxLength) || max || 20; return function () { return max - node.value.length; }; } function dispValue (node, cbFunc) { return function () { node.firstChild.nodeValue = cbFunc (); }; } setInterval ( dispValue ( document.getElementById ('inputlength1'), lengthCounter (document.getElementById ('title1'))), 333); setInterval ( dispValue ( document.getElementById ('inputlength2'), lengthCounter ( document.getElementById ('title2'))), 333); </script> すうりぷとは、おんろうどごにしてね すぱんのなかには、さいしょにてきとうなもじをいれてね ぜんかくくうはくは、はんかくくうはくにしてね
お礼
回答ありがとうございます。 やり方が悪いのかもしれませんが、普通のカウントすらできませんでした。 ＞すうりぷとは、おんろうどごにしてね 初心者なのでこの意味すらわかりません。
- yambejp
- ベストアンサー率51% (3827/7415)
onchangeを設定しておけばよいのでは？ <input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(this.value)" onchange="ShowLength(this.value)"><br />
お礼
回答ありがとうございます。 やり方が悪いのかもしれませんが、コピペでカウントできませんでした。
関連するQ&A
- JavascriptでObjectからJSON形式変換するにはどうすればいいでしょうか？
toSourceだと少し違うし、どうすればいいのでしょうか。簡単に変換できる関数でもあればいいのですが、わかりませんでした。 どなたかご教授お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>objctからJSONに変換</title> <script type="text/javascript"> obj = new Object(); obj.test = "txt"; str = obj.toSource(); document.write(str); //--> </script> </head> <body> </body> </html>
- ベストアンサー
- JavaScript
- ＸＨＴＭＬのソースで文字ばけします
とあるＨＴＭＬの本に書いてあるとうりソースをうっていくと <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtyd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>もりのみや<title/> などのＷｅｂ上で文字入力をすると文字化けします。 どうしてでしょうか？ インターネットエクスプローラーを使っています。
- 締切済み
- インターネットビジネス
- XHTML のタイトルが表示されません ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
- 前後の全角スペースを削除すると文字化けする
PHP初心者です。 trimファンクションを使って前後の全角スペースを削除したいのですが $test = " 左右に全角スペースがある文字列 "; echo trim ( $test , " " ); だと問題なく表示されるのですが以下のようにテキストボックスに入力した文字の 前後の全角スペースを削除しようとすると最初の１文字目が文字化けします。 ●test_input.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>前後の全角スペースを削除する</title> </head> <body> <form action="test.php" method="get"> <dl> <dt>文字を入力してください。</dt> <dd><input type="text" name="test" size="50" maxlength="50" id="test" /> </dd> </dl> <input type="submit" value="送信する" /> </form> </body> </html> ●test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>前後の全角スペースを削除する</title> </head> <body> <p>入力文字</p> <?php $test = ($_REQUEST['test']); echo ($test); ?> <br /> <br /> <p>trim ( $test , " " )</p> <?php echo trim ( $test , " " ); ?> </body> </html> どこがいけないのでしょうか？ よろしくお願いします。
- ベストアンサー
- PHP
- ファイヤーフォックスでの文字化け
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> </head>までの部分をコピーペーストしてみましたが、昨日、<body>～<body>部分で更新をしようと思い、予定情報の終了した分の文字を削除して、ローカルで確認したところ、そのページすべてが文字化けしていました。アップロードしても文字化けはなおりませんでした。 因みに文字コードはUTF-8に設定して（いるつもり?）作成しており、これまでＩＥもグーグルクロームもファイヤーフォックスもしばらく使ってそのようなことはありませんでしたので、何が原因なのかわかりません。（現在、ファイヤーフォックスです。） 詳しい方教えて下さい！！
- ベストアンサー
- HTML
- XHTML meta属性 文字化け
XHTMLを勉強しています。 以下のように記述して表示すると タイトルの部分が文字化けします。 何故でしょうか <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページの作り方</title> <meta name="description" content="初心者のためのホームページテスト" /> <meta name="keywords" content="ホームページ,作成,初心者" /> </head> <body> テスト </body> </html>
- ベストアンサー
- HTML
- zampp PHPでPOSTの変数が返ってこない
お世話になります。 PHPを最近はじめたばかりの初心者です。 zampp をインストールし、Apache、PHPの動作は問題なく動いています。 「sample.html」「sample.php」の２つファイルを作成し、 C:\xampp\htdocsに保存しました。 「sample.html」と「sample.php」は、ある本からサンプルコードです。 ------------------- 「sample.html」 ------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>sample page</title> </head> <body> <h1>フォームサンプル</h1> <form method="post" action="sample.php"> <input type="text" name="text1"> <input type="submit"> </form> </body> </html> ------------------- 「sample.php」 ------------------- <?php $str = $_POST['text1']; if ($str != ""){ $msg = "あなたは、「{$str}」って書いたね？"; } else { $msg = "何も書いてなかったよ？"; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>sample page</title> </head> <body> <h1>結果表示</h1> <div><?php echo $msg; ?> </body> </html> ------------------------------------ htmlファイルをブラウザーで開き、submit（送信ボタン）を押すと、 text1に入力した文字が、返ってきて .phpに表示されなければならないのですが、 .phpでブラウザーに表示されるのは、上記のコードがそのまま表示されてしまいます。 （入力した文字も代入されずに、コードのまま表示されます） 上記のコードとは違う、htmlファイルとphpファイルで動作させても コードがそのまま表示されて、$_POSTがうまいきません。 原因が分からずに困っています。 ご教授いただけますよう何卒よろしくお願いします。
- ベストアンサー
- PHP
- XHTMLの文字コードのEUC-JPの文字化け
いつもはHTML４.01で作業をしていて XHTMLはどうも不慣れなせいか 今、外注が作成したHPを修正していて 文字コードをEUC-JPにどうしても変更しなければならないのですが それがうまくいかず、文字化けが発生してます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> を <?xml version="1.0" encoding="euc-jp"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> このように設定したら文字化けが発生しました。 どのように設定したら文字化けがなくなりますか？
- ベストアンサー
- その他([技術者向] コンピューター)
- utf-8 文字化け
メモ帳でhtmlページを作成してたのですが、日本語を入力してIEで確認したら文字化けになります 原因がわからず困っていました よろしくお願いします IE10 IE 表示 エンコードはutf-8 自動選択にすると日本語表示になります <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ABC</title> <style type="text/css"> </style> </head> <body> <h1>ようこそ</h1> <p></p> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- charsetとフォーム入力文字
Htmlファイルの先頭が <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ・・・ で始まります。 このファイルのフォームに入力した文字はUTF-8で送られるのでしょうか。 それともOSの文字コードに依存するのでしょうか?
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 やっと理解できました。