Q&A
ご回答ありがとうございます。
おすすめしていただいたようにJqueryで試してみたいと思います。
ちなみに、MonacaでJqueryを使うにはJS/CSSコンポネントの一覧から追加する必要があると思うのですが、Jqueryにも（Monaca version）と書かれたものやその他たくさん種類がありどれを追加すればよいのかわかりません。
この場合、特にJqueryに関するファイルを取得しなくとも反映させられるのでしょうか？
こんにちは、プログラミング初心者です。
Onsen UIの利用をこちらで皆さんに勧めていただいてから、Onsenについての基本事項を同時進行で勉強しています。
現在、Monaca(HTML5+Javascriptのハイブリッドアプリ開発プラットフォーム)のベーシックプランにて初めてのアプリ開発に取り組んでいます。
今のところ、Onsen UI のアラートダイアログをアプリ起動時に表示する仕組みを反映できている段階です。
最終的にはこれをTextarea内の文字数制限を超えてユーザーが文字入力をしたときに表示したいと思っています。
過去にこちらで繰り返し質問をさせていただいて、通常のalertタグにて上記の機能を反映させることはできましたが、警告ウィンドウのデザインを変更したかったのでOnsenUI のalert-dialogを用いて実現させたいと考えております。過去にいただいた回答を総合して以下のようなコードを書き込んでみましたが、反映されませんでした。
html
1<div style="padding:0px 30px 30px 20px " "margin:10px 20px 10px 10px"> 2<textarea rows="3" cols="30" wrap="hard" 3 style="width:300px;height:100px;border-style:none;font-size:x-large;text-align:center;" 4 placeholder="Input your message!" 5 onchange="Limit(this)" id="ttttt" > 6</textarea> 7</div>
javascript
1<script type="text/javascript"> 2var max=36; //制限文字数 3function Limit(event){ 4Tarea= document.getElementById("ttttt"); 5mojiVal= Tarea.value; //テキストエリアの文字数 6 val= mojiVal.replace(/\n|\r\n/g,"");//改行を除く 7 val= val.length; //改行を含めない文字数 8 Etype=event.type; //イベントのタイプを取得 9 10if(val>max){//イベントのタイプが"onChange"で制限文字数を超えたらalert dialog表示 11 alertDialog.show('alert.html'); 12Tarea.value=mojiVal.substring(0,max); 13function hideDialog() { 14 alertDialog.hide(); 15 }; 16} 17} 18 19<script type="text/ons-template" id="alert.html"> 20 <ons-alert-dialog animation="default" cancelable> 21 <div class="alert-dialog-title">注意！</div> 22 <div class="alert-dialog-content"> 23 警告ウィンドウのコメント 24 </div> 25 <div class="alert-dialog-footer"> 26 <button class="alert-dialog-button" onclick="hideDialog();">OK</button> 27 </div> 28 </ons-alert-dialog> 29 30</script> 31
原因を突き止め、この仕組みを反映させられたらうれしいです。
何か間違いに気が付かれた方、その他の点でもご指摘いただければ、参考にさせていただきたいです。よろしくお願いします。
回答2件
0
ベストアンサー
フォーカス移動時でチェックでOKならonchangeイベントが使えます
HTML
1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsenui.css" /> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsen-css-components.css" /> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/js/onsenui.js"></script> 8<!-- 9 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> 10 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 11--> 12</head> 13<body> 14<div style="padding:0px 30px 30px 20px " "margin:10px 20px 10px 10px"> 15<textarea rows="3" cols="30" wrap="hard" 16 style="width:300px;height:100px;border-style:none;font-size:x-large;text-align:center;" 17 placeholder="Input your message!" id="ttttt" onchange="onChange();" > 18</textarea> 19</div> 20</body> 21<script type="text/javascript"> 22var max=32; //制限文字数 23var alertDialog = null; 24 25function onChange() { 26 var _this = document.getElementById("ttttt"); 27 val= _this.value.replace(/\n|\r\n/g,"");//改行を除く 28 val= val.length; //改行を含めない文字数 29 30 if(val > max){//イベントのタイプが"onChange"で制限文字数を超えたらalert dialog表示 31 _this.value = _this.value.substring(0, max); 32 ons.createAlertDialog('alert.html').then(function(dialog) { 33 alertDialog = dialog; 34 alertDialog.show(); 35 }); 36 } 37} 38function hideDialog(event) { 39 alertDialog.hide(); 40}; 41</script> 42 43<script type="text/ons-template" id="alert.html"> 44 <ons-alert-dialog animation="default" cancelable> 45 <div class="alert-dialog-title">注意！</div> 46 <div class="alert-dialog-content"> 47 警告ウィンドウのコメント 48 </div> 49 <div class="alert-dialog-footer"> 50 <button class="alert-dialog-button" onClick="hideDialog(event);">OK</button> 51 </div> 52 </ons-alert-dialog> 53 54</script> 55</html> 56
投稿2017/07/06 05:15
総合スコア5545
0
textareaにonChangeイベントはフォーカス移動時だったはず。
リアルタイムでやりたい場合はjQueryを利用してイベントを取るとかでやるのがいいかと思います。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsenui.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsen-css-components.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/js/onsenui.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> --> </head> <body> <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!" id="ttttt" > </textarea> </div> </body> <script type="text/javascript"> var max=36; //制限文字数 var alertDialog = null; $('#ttttt').bind('input propertychange', function() { val= this.value.replace(/\n|\r\n/g,"");//改行を除く val= val.length; //改行を含めない文字数 if(val > max){//イベントのタイプが"onChange"で制限文字数を超えたらalert dialog表示 this.blur(); this.value = this.value.substring(0, max); ons.createAlertDialog('alert.html').then(function(dialog) { alertDialog = dialog; alertDialog.show(); }); } }); function hideDialog() { alertDialog.hide(); }; </script> <script type="text/ons-template" id="alert.html"> <ons-alert-dialog animation="default" cancelable> <div class="alert-dialog-title">注意！</div> <div class="alert-dialog-content"> 警告ウィンドウのコメント </div> <div class="alert-dialog-footer"> <button class="alert-dialog-button" onClick="hideDialog();">OK</button> </div> </ons-alert-dialog> </script> </html>
※もっとスマートなonsenuiDialogのとじ方ある気がするのでそのうち調べたい・・・ｗ
投稿2017/07/05 05:15
編集2017/07/05 05:46総合スコア5545
rururu3さん
ご提案していただいたコードで試してみたところ、見事に反映されました！
長い間悩んできた課題でしたので、解決してうれしいです。ご協力感謝いたします。
もう一歩踏み込んだ質問をさせていただきたいのですが、現段階では文字制限を超えた瞬間に警告ウィンドウが表示される仕組みになっているのですが、文字制限を超えた文字数でTextareaに入力をして、そのあとカーソルをTextareaから離したときに警告が表示されるようにするにはどのようなコードを書き込めばよいのでしょうか・・？
あれ、フォーカス移動時でよかったんですね・・・となるとjQueryを使う必要すらないです。解答として別途記載いたします。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/08 05:11