こんにちは、プログラミング初心者です。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/08 05:11