しなやか暮らし研究所パソコン処理ホームページ作成 Javascript ユーザーエージェント

Javascript部品

ユーザーエージェントの検出

HTML

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>郵便番号から都道府県入力</title>
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
 
<input class="smh_right" type="text" name="zip01" size="10" maxlength="8" onkeyup="AjaxZip3.zip2addr(this,'','pref01','addr01');">
<span style="font-size: x-small; color: rgba(102,102,102,1);"> 都道府県名は自動入力されます</span>
 
<input class="smh_right" type="text" name="pref01">
 
<input  class="smh_right" type="text" name="addr01">

Javascript

Googleサイトよりrun time download(head部でロード)
inputタグで onkeyup=Javascriptを指定

タグの表示On/Off

受渡し方法の選択により受渡し時間が表示されている。

受渡し方法の選択により受渡し時間が非表示になる。

HTML

<div class="smh_line_w"><!-- 入力6行目 -->
<label class="thick1">受渡方法</label>
    <dl style="margin-left : 20px;text-align : left;float : left;">
      <dd><input id="Ans1" class="input_radio" name="受取方法" type="radio" value="現場手渡し" checked onclick="JikanSyukaOn();">現場手渡し
      <dd><input id="Ans2" class="input_radio" name="受取方法" type="radio" value="指定場所郵送(佐川着払い)" onclick="JikanSyukaOff();">指定場所郵送(佐川着払い)</dd>
  </dl>
</div>
 
<div id="inputC" class="smh_line_w"><!-- 入力8行目 -->
<label class="long">受渡時間帯</label>
<select name="r_time">
        <option value="時間指定なし">時間指定なし</option>
        <option value="10時より2時間">10時より2時間</option>
        <option value="12時より2時間">12時より2時間</option>
        <option value="14時より2時間">14時より2時間</option>
        <option value="16時より2時間">16時より2時間</option>
        <option value="18時より2時間">18時より2時間</option>
        <option value="20時より2時間">20時より2時間</option>
        <option value="22時より2時間">22時より2時間</option>
</select>
</div>

Javascript

<script type="text/javascript">
<!--
function JikanSyukaOff( ) {
    document.getElementById('inputC').style.display = 'none';
    document.form1.r_time.value="";
}
function JikanSyukaOn( ) {
    document.getElementById('inputC').style.display ='block';
    document.form1.r_time.value="時間指定なし";
}
-->
</script>

本日から10日間を表示

HTML & JV

<script type="text/javascript">
<!--
<div class="smh_line_w"><!-- 入力7行目 -->
<label class="long">受渡希望日</label>
<script type="text/javascript">
document.writeln("<select name=\"受渡希望日\">");
for (i = 0; i <= 10; i++) {
plus5(i);
}
document.writeln("</select>");
</script>
</div>
-->
</script>

Javascript

function plus5(p) {
var week = new Array("日", "月", "火", "水", "木", "金", "土");
var cToDay = (24 * 60 * 60 * 1000);
var today = new Date();
var plus5 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + p);
var y5 = plus5.getFullYear();
var m5 = plus5.getMonth()+1;
var d5 = plus5.getDate();
 
var dt = new Date(y5, m5 - 1, d5);
var dayOfWeek = week[dt.getDay()];
 
document.writeln("<option value=\"" + y5 + "年" + m5 + "月" + d5 + "日 ("+ dayOfWeek + ")" + "\">" + y5 + "年" + m5 + "月" + d5 +"日 ("+ dayOfWeek + ")" + "</option>");
}

テキスト入力での文字数カウント

1文字キー入力するごとにJavascriptに飛んで文字数を数えている。

HTML

<textarea id="message" class="input" name="備考" rows="5" cols="28" onkeyup="ShowLength(value);" style="margin : -110px 0 3px 90px;float : left;">
</textarea>

Javascript

<script type="text/javascript">
<!--
function ShowLength( str ){
    document.getElementById("textlength").innerHTML = "現在" + str.length + "文字";
}
-->
</script>

送信時の最大文字数チェック

送信ボタンが押されたときに最大文字数チェックを行う。

HTML

<input class="action" type="submit" value="送信" style="margin-right : 5%; width : 100px;" onclick="set_limit()">
<input class="action" type="reset" value="リセット" style="margin-left : 5%; width : 100px;">

Javascript

<script type="text/javascript">
<!--
var txt_limit = 100; //最大文字数
function set_limit(that){
        var check_element = document.getElementById("message");
        var check_limit = check_element.value.length;
        if(check_limit > txt_limit){
                alert('入力文字数が '+txt_limit+'文字を超えました');
                check_element.focus();
                }
        else {
        document.form1.action="../t_postmail/postmail.cgi";
        document.form1.method="post";
        document.form1.submit();
        }
}
-->
</script>

1 2