Textarea内の文字数制限を超えたときに指定のモーダルウィンドウを警告として表示したいです！

Question

こんにちは、プログラミング初心者です。
現在、Monaca(HTML5+Javascriptのハイブリッドアプリ開発プラットフォーム)のベーシックプランにて初めてのアプリ開発に取り組んでいます。
その中で、Textarea内に文字制限を設け、超過すると警告ウインドウが出てくる仕組みを作っています。具体的には、ブラウザに依存するalertタグではなく、Tangle.jsというモーダルプラグインをダウンロードし、そのコードをTangle.jsホームページを参照して書き込みました。
現段階では、ユーザーが文字数制限を超えてTextarea内に入力を行った場合にこのモーダルウィンドウを警告として表示させたいのですが、その出し方がわかりません。以下がそのコードです。

<link rel="stylesheet" href="www/tingle.min.css">

<script type="text/javascript" src="www/tingle.min.js">
// instanciate new modal
var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2'],
    onOpen: function() {
        console.log('modal open');
    },
    onClose: function() {
        console.log('modal closed');
    },
    beforeClose: function() {
        // here's goes some logic
        // e.g. save content before closing the modal
        return true; // close the modal
        return false; // nothing happens
    }
});

// set content
modal.setContent('<h1>here\'s some content</h1>');

// add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
    // here goes some logic
    modal.close();
});

// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
    // here goes some logic
    modal.close();
});

// open modal
modal.open();

// close modal
modal.close();    
        
</script>

<font>
<div style="padding:0px 30px 30px 20px " "margin:10px 20px 10px 10px">
<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)"id="ttttt" >
</textarea>  
</div>
</font> 

※質問と関連した部分のみ抜粋しています。

Comments

[kei344]

「見当がつきません」は何についてでしょうか。イベントでしょうか。文字列の取得でしょうかアラートの実行の仕方でしょうか。質問文を具体的に編集してください。

[anopurihana]

kei344さん　そうですね、表現が曖昧でした！具体的には”アラートの実行の仕方”です。質問文も編集しなおします。

Answer 1

流れとしては
・textarea 内のキーボード押下、コピペをトリガーに文字数カウント
・超過時、モーダル表示を ON
とそれほど難しくないと思います。

問題は、ON したモーダルを消去したあとの挙動をどうするかというところです。もしコピペで、大幅にオーバーしてしまっていた場合、1文字消去するたびに、モーダルが ON されてしまいます。

以下のような回避策が必要かと
・消去は許容する
・モーダル表示後は、制限値内の文字数まで消去する
等々。

多分、モーダル消去後の実装のほうが面倒くさいと思います。
ご自身にできることを整理して、モーダル消去後の仕様を先に決めたほうが良いかと。

Comments

[anopurihana]

te2jiさん　ご回答ありがとうございます。
仰るように、モーダル消去後の処理のほうが大変そうです。消去後については、制限値内の文字数まで消去する方向で行きたいと思っています。実はモーダルウィンドウを取り入れる前はalertタグを使って警告を出していました。そのときは、こちらで指定した文字制限を超えると警告ウィンドウが表示され、それを消去すると自動的に剰余分の文字数が処理される仕組みができていました。しかしモーダルと組み合わせるとなると、どう組み合わせればよいかわからないのが現状です。

[退会済みユーザー]

yambejp さんのコード参考にするとイイですよ。

[anopurihana]

te2jiさん　お勧めしていただいたようにyambejpさんのコードで試してみましたが、うまくいきませんでした。特別エラーがあるわけではなかったです。

Answer 2

ベタに書けばこんなかんじです

var len_limit=10;
function Limit(obj){
  if(obj.value.length>len_limit){
    alert("over");
    obj.value=obj.value.substr(0,len_limit)
    return false;
  }
  return true;
}

Comments

[anopurihana]

yambejpさん　ご回答ありがとうございます。ご提案していただいたコードを試してみましたが、反映されませんでした。何か他に原因があると思いますので、探してみます。

[yambejp]

あ、ごめんなさい
onchange="Limit(this)" onkeyup="Limit(this)"

というようにthisを引数で渡して下さい

[anopurihana]

yambejpさん　ご指摘していただいた通りにしたところ、警告ウィンドウが反映されました。しかし、警告ウィンドウのデザインを変更したいために、モーダルウィンドウを取り込むことに決めたので、alertタグを使うとウィンドウがブラウザに依存しているのでデザイン変更ができません。この場合、どのように用意したモーダルウィンドウと上でご提示いただいたようなイベントを結び付けられるかがわかりません。

[kei344]

＞ どのように用意したモーダルウィンドウと上でご提示いただいたようなイベントを結び付けられるかがわかりません。
alert("over");の代わりに modal.open();

[anopurihana]

kei344さん　ご指摘ありがとうございます。実際に以下のように変更しましたが、反映されませんでした。
var len_limit=10;
function Limit(obj){
if(obj.value.length>len_limit){
modal.open();
obj.value=obj.value.substr(0,len_limit)
return false;
}
return true;
}

[kei344]

To: anopurihanaさん
https://jsfiddle.net/5sLL4m7x/

[anopurihana]

kei344さん
わざわざ見やすいようにコードを作っていただきありがとうございます。確かに、制作していただいたページ上ではしっかり反映されていますね。実際に私のほうも書き換えてみましたが、やはり反映されません。他のコードが邪魔をしているのではないかと思い、すべて関係のないコードを一旦取り去ってみても効果がありませんでした。MonacaがTingleに対応していないということなのでしょうか・・・。

[namimon]

横から＆そもそも論になってしまいますが、monacaにはonsen-uiという、ネイティブっぽい挙動をしてくれる仕組みがあります。
onsen-alert-dialog
http://ja.onsen.io.s3-website-us-east-1.amazonaws.com/v2/docs/js/ons-alert-dialog.html
onsen-ui を学ぶコストは必要ですが、外部のjqueryプラグインをかき集めるよりは安定して機能が組み込めますよ。

[anopurihana]

namimonさん　ご回答ありがとうございます。仰るようにOnsenUIを使ったほうが時間はかかってしまいますが安定するというご指摘を多くいただいたので、OnsenUIでモーダルを実装する方向で行きたいと思います。ありがとうございました。