Textarea内の文字に改行制限を設けたいのですが…。

こんにちは、プログラミング初心者です。
現在Monaca(HTML＋JavaScriptのハイブリッドアプリ開発プラットフォーム)の無料プランで初のアプリ開発に取り組んでいます。
その中で、<textarea>のタグを使用して、利用者が自由に文字入力をできる仕組みを作りました。そして画面の関係上文字数制限も設けましたが、行数に対する制限がまだない状態です。行数制限を３行で設けたいと思い、ネットの記事を参考に以下のようなコードで試してみましたが、エラーになってしまいます。
そこで、原因解明に行数制限の別の方法や、その他のご指摘などあれば参考にさせていただきたいです。
よろしくお願いいたします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<script language="JavaScript">
<!--
window.document.onkeypress=lineCheck;
function lineCheck(e){
var ta=document.getElementById("TEXT");
var row=ta.getAttribute("rows");
var r=(ta.value.split("\n")).length;
if(document.all){
if(r>=row && window.event.keyCode==13){ //keyCode for IE
return false; //入力キーを無視
}
} else {
if(r>=row && e.which==13){ //which for NN
return false;
}
}
}
//-->
</script>



bodyタグ内↓
<textarea rows="3" cols="30" wrap="hard"style="width:300px;height:100px;border-style:none;font-size:x-large;text-align: center;"placeholder="Input your message!"
onchange="Limit(event)" onkeyup="Limit(event)">
</textarea>

※他の、質問に無関係なコードは省略しています。

kei344

2017/06/03 09:59

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

anopurihana

2017/06/03 10:18

kei344さん　ご返事ありがとうございます。ご指摘の通りに編集いたしました。至らない点多々あると思いますが、よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

動作しない原因は、idをつけていないことです。また、HTML4ではwrap属性とplaceholder属性は定義されていません。HTML5を使いましょう。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<textarea rows="3" cols="30" wrap="hard"
9          style="width:300px;height:100px;border-style:none;font-size:x-large;text-align: center;"
10          placeholder="Input your message!"
11          onchange="Limit(event)" onkeyup="Limit(event)" id="TEXT">
12</textarea>
13<script>
14    function lineCheck(e) {
15        var ta = document.getElementById("TEXT");
16        var row = ta.getAttribute("rows");
17        var r = (ta.value.split("\n")).length;
18        if (document.all) {
19            if (r >= row && window.event.keyCode === 13) { //keyCode for IE
20                return false; //入力キーを無視
21            }
22        } else {
23            if (r >= row && e.which === 13) { //which for NN
24                return false;
25            }
26        }
27    }
28
29    window.document.onkeypress = lineCheck;
30</script>
31</body>
32</html>

投稿2017/06/03 12:09

編集2017/06/03 12:11

s8_chu

総合スコア14731

anopurihana

2017/06/08 14:26

返答が遅くなってしまい申し訳ありません。ご指摘いただいた通りに書き直してみたところ、行数制限ができました！ HTML４に関しては、完全にこちらの表記ミスでした、お騒がせしました。ご丁寧なアドバイス、感謝いたします。

行動規範の内容に同意します

idを付け忘れているように見えます。

投稿2017/06/03 06:55

Lhankor_Mhy

総合スコア37040

anopurihana

2017/06/03 07:06

Lhankor_Mhyさんご指摘ありがとうございます！仰るようにid指定が抜けていました。そこで追加し直してみたのですが、依然エラーのままです。変更後のコードです↓ <textarea rows="3" cols="30" wrap="hard"style="width:300px;height:100px;border-style:none;font-size:x-large;text-align: center;"placeholder="Input your message!"id="Tobj1" onchange="Limit(event)" onkeyup="Limit(event)"id="TEXT"> 何か他に反映されない原因があるのでしょうか…？

Lhankor_Mhy

2017/06/03 07:21

今度は、idが2つついているのが原因ではないでしょうか。

anopurihana

2017/06/03 11:50

うっかりしていました、今回の方法を試す前のコードが少し残ったままでした。ご指摘ありがとうございます。

行動規範の内容に同意します

KeyboardEvent.keyCode は非推奨になっています。

【KeyboardEvent.keyCode - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

KeyboardEvent.key を使うと良いでしょう。

【KeyboardEvent.key - Web APIs | MDN】
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

【UI Events KeyboardEvent key Values】
https://www.w3.org/TR/uievents-key/#key-Enter

// which for NN はたぶん Netscape Navigator のことを指していると思いますが、そのブラウザの最終バージョンが出てから10年近く経っています。そのくらいであれば動くコードも多いですが、今から勉強されるのであれば、新しい入門書などを探されることをお勧めします。

投稿2017/06/04 16:57

kei344

総合スコア69610