//------------------------------------------------------------------------------ //【目次】 // -- 標準機能 -- // unspacer(str_id) 空白文字（半全角含む）しか入力がない場合にエラー表示。 // eng_spelling_check(str_id) 禁則文字（全角文字（スペース除く）と半角カタカナ以外）しか入力がない場合にエラー表示。 // normal_width_input(str_id) 半角数字でない時にエラー表示。 // email_check(str_id) メールアドレス正規化。 // url_check(str_id) URL正規化。 // move_next(str_id, next_str_id, num) 桁数(num)に達した場合、現在(str_id)から次(next_str_id)へ移動。 // -- カスタマイズ機能 -- // show_block(str_id) ブロック　表示・非表示モード。 // show_inline(str_id) インライン表示・非表示モード。 // disabled_area(str_id) 入力可能・不可能モード。 // disabled_block(str_id) ブロック　入力可能&表示・入力不可能&非表示モード。 // disabled_inline(str_id) インライン入力可能&表示・入力不可能&非表示モード。 // -- 案内機能 -- // help(str_id,flag,comment) 入力欄にサンプルテキストを表示させる仕組み。 // help_submit(str_id_str) 送信時にサンプルテキストを処理 //------------------------------------------------------------------------------ //------------------------------------------------------------------------------ //HTML側での書き方例 //ポイント：各HTML要素には、必ずidを指定し、id値は半角英数とする。※数字で始まるのはNG // 空白のみ入力を制御 // スパム対策で使用 // 半角数字制御 // ※cssのime-mode:disabled;と併用すれば尚良し // メールアドレス正規化 // URL正規化 // 電話番号や郵便番号 // 入力で便利 // // 表示・非表示を制御・・・任意選択状態にある時に、指定した数だけ切り替えが発動する。 // //

テキストだってできます

// // // 入力可能・不可能を制御・・・任意選択状態にある時に、指定した数だけ切り替えが発動する。 // // // // // 入力可能&表示・不可能&非表示を制御・・・任意選択状態にある時に、指定した数だけ切り替えが発動する。 // // // // // // // 入力欄にサンプルテキストを表示させる仕組み // ページロード時 // もしくは、js内に、 // window.onload = funtion load(){ // this.help('id名','on','comment'); // } // フォーカス時 onfocus="help('id名','on','comment');" // フォーカスはずれ時 onblur="help('id名','off','comment');" // 送信時 //------------------------------------------------------------------------------ //--------------------------------------------------------------- //空白文字しか入力がない場合にエラー表示。 //--------------------------------------------------------------- function unspacer(str_id) { //初期設置 var flag_space = 0; var flag_text = 0; var num = document.getElementById(str_id).value.length; var str = document.getElementById(str_id).value; for(var i = 0; i < num; i ++){ if(str.charAt(i) == ' ' || str.charAt(i) == '　'){ flag_space = 1; }else{ //空白以外が存在する場合 flag_text = 1; } } //空白だけしか記載されていない場合は抹消 if(flag_space == 1 && flag_text == 0){ alert("スペースしか記入されておりません。再度ご確認ください。"); document.getElementById(str_id).value = ''; } } //--------------------------------------------------------------- //禁則文字しか入力がない場合にエラー表示。 //全角文字（スペース除く）・半角カタカナ以外がNG //--------------------------------------------------------------- function eng_spelling_check(str_id){ //初期設置 var flag_ngword = 0; var flag_text = 0; var num = document.getElementById(str_id).value.length; var str = document.getElementById(str_id).value; var str_v; for(var i = 0; i < num; i ++){ str_v = str.charAt(i); if(str_v.match(/[ -~|　]/g)){ flag_ngword = 1; }else{ //半角英語以外が存在する場合 flag_text = 1; } } //半角英語だけしか記載されていない場合は抹消 if(flag_ngword == 1 && flag_text == 0){ alert("不正な文字列です。再度ご確認ください。"); document.getElementById(str_id).value = ''; } } //--------------------------------------------------------------- //半角数字でない時にエラー表示。 //--------------------------------------------------------------- function normal_width_input(str_id) { c = document.getElementById(str_id).value; if(c.match(/[^0-9]/g)){ document.getElementById(str_id).value = ''; alert("半角数字で入力してください。"); } } //--------------------------------------------------------------- //メールアドレス正規化。 //--------------------------------------------------------------- function email_check(str_id) { c = document.getElementById(str_id).value; check = /.+@.+\..+/; if(!c.match(check)){ document.getElementById(str_id).value = ''; alert("メールアドレスが正しくありません。"); } } //--------------------------------------------------------------- //URL正規化。 //--------------------------------------------------------------- function url_check(str_id) { c = document.getElementById(str_id).value; check = /http\:\/\/.+\..+/; if(!c.match(check)){ document.getElementById(str_id).value = ''; alert("URLが正しくありません。"); document.getElementById(str_id).focus(); } } //--------------------------------------------------------------- //次の枠へ移動。 //--------------------------------------------------------------- function move_next(str_id, next_str_id, num) { if (str_id.value.length >= num) { document.getElementById(next_str_id).focus(); } } //------------------------------------------------------------------------------ //disabled = true　の場合、入力POSTデータとしてすら飛びません。 // //HTML側 //個人の場合はチェックを入れる // //個人 //法人 // //と記述しておくと、チェックが入った時とのみ、個人の方のテキストボックスが //記入可能になる。逆に不可視状態であれば、POSTデータすら飛ばない為、データ重複もなくなる。 //注意：このケースの場合、初めから読み込ます必要がある為、 // と記述しておく必要がある。 //------------------------------------------------------------------------------ //--------------------------------------------------------------- //表示非表示モード　ブロック。 //--------------------------------------------------------------- function show_block(str_id){ var str_num = str_id.split('-'); for(var i = 1; i <= str_num[1]; i ++){ if( document.getElementById(str_num[0]).checked ){ //チェックが入っている場合 document.getElementById(str_num[0] + '-' + i ).style.display = 'block'; //可視 }else{ //チェックが入っていない場合 document.getElementById(str_num[0] + '-' + i ).style.display = 'none'; //不可視 } } } //--------------------------------------------------------------- //表示非表示モード　インライン。 //--------------------------------------------------------------- function show_inline(str_id){ var str_num = str_id.split('-'); for(var i = 1; i <= str_num[1]; i ++){ if( document.getElementById(str_num[0]).checked ){ //チェックが入っている場合 document.getElementById(str_num[0] + '-' + i ).style.display = 'inline'; //可視 }else{ //チェックが入っていない場合 document.getElementById(str_num[0] + '-' + i ).style.display = 'none'; //不可視 } } } //--------------------------------------------------------------- //入力　可能・不可能モード。 //--------------------------------------------------------------- function disabled_area(str_id){ var str_num = str_id.split('-'); for(var i = 1; i <= str_num[1]; i ++){ if( document.getElementById(str_num[0]).checked ){ //チェックが入っている場合 document.getElementById(str_num[0] + '-' + i ).disabled = false; //可視 }else{ //チェックが入っていない場合 document.getElementById(str_num[0] + '-' + i ).disabled = true; //不可視 } } } //------------------------------------------------------------------------------ // //fmailカスタマイズ仕様用 //画面切り替え処理　ブロックごと表示・非表示を切り替える // //------------------------------------------------------------------------------ function disabled_block(str_id){ var str_num = str_id.split('-'); if( document.getElementById(str_num[0]).checked ){ //初めに表示させる方 for(var i = 1; i <= str_num[1]; i ++){ //データ部分 document.getElementById(str_num[0] + '-' + i).disabled = false; //可視 //表示部分 document.getElementById(str_num[0] + '-' + i).style.display = 'block'; //可視 } // 後から表示させる方 for(i = 1; i <= str_num[2]; i ++){ //データ部分 document.getElementById(str_num[0] + '_reverse-' + i).disabled = true; //不可視 //表示部分 document.getElementById(str_num[0] + '_reverse-' + i).style.display = 'none'; //不可視 } }else{ //初めに表示させる方 for(var i = 1; i <= str_num[1]; i ++){ //データ部分 document.getElementById(str_num[0] + '-' + i).disabled = true; //不可視 //表示部分 document.getElementById(str_num[0] + '-' + i).style.display = 'none'; //不可視 } // 後から表示させる方 for(i = 1; i <= str_num[2]; i ++){ //データ部分 document.getElementById(str_num[0] + '_reverse-' + i).disabled = false; //可視 //表示部分 document.getElementById(str_num[0] + '_reverse-' + i).style.display = 'block'; //可視 } } } //------------------------------------------------------------------------------ // //fmailカスタマイズ仕様用 //画面切り替え処理　インラインごと表示・非表示を切り替える // //------------------------------------------------------------------------------ function disabled_inline(str_id){ var str_num = str_id.split('-'); if( document.getElementById(str_num[0]).checked ){ //初めに表示させる方 for(var i = 1; i <= str_num[1]; i ++){ //データ部分 document.getElementById(str_num[0] + '-' + i).disabled = false; //可視 //表示部分 document.getElementById(str_num[0] + '-' + i).style.display = 'inline'; //可視 } // 後から表示させる方 for(i = 1; i <= str_num[2]; i ++){ //データ部分 document.getElementById(str_num[0] + '_reverse-' + i).disabled = true; //不可視 //表示部分 document.getElementById(str_num[0] + '_reverse-' + i).style.display = 'none'; //不可視 } }else{ //初めに表示させる方 for(var i = 1; i <= str_num[1]; i ++){ //データ部分 document.getElementById(str_num[0] + '-' + i).disabled = true; //不可視 //表示部分 document.getElementById(str_num[0] + '-' + i).style.display = 'none'; //不可視 } // 後から表示させる方 for(i = 1; i <= str_num[2]; i ++){ //データ部分 document.getElementById(str_num[0] + '_reverse-' + i).disabled = false; //可視 //表示部分 document.getElementById(str_num[0] + '_reverse-' + i).style.display = 'inline'; //可視 } } } //------------------------------------------------------------------------------ // //フォーカス時 // //------------------------------------------------------------------------------ function help(str_id,flag,comment){ var a = document.getElementById(str_id).value; //フォーカスが外れた時 if(flag == 'off'){ if(a == ''){ document.getElementById(str_id).value = comment; document.getElementById(str_id).style.color = "#aaaaaa"; }else if(a != comment){ document.getElementById(str_id).style.color = "black"; }else{ document.getElementById(str_id).style.color = "#aaaaaa"; } //フォーカスされた時 }else if(flag == 'on'){ //値がヘルプと同じ時はクリア if(a == comment){ document.getElementById(str_id).value = ''; document.getElementById(str_id).style.color = "black"; }else{ document.getElementById(str_id).style.color = "black"; } } } //------------------------------------------------------------------------------ // //送信時 // //------------------------------------------------------------------------------ function help_submit(str_id_str){ //システム有無でジャッジ var flag_sys = 0; var a = str_id_str.split(','); var a_str; //未入力チェック for(var i = 0;i < a.length; i ++){ a_str = a[i].split('='); //値が規定値の時 if(a_str[1] == document.getElementById(a_str[0]).value){ document.getElementById(a_str[0]).value = ''; } } }