LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tattyan39

HTML CSS JavaScript セレクター、カレンダー、誕生日入力、都道府県入力、パスワード入力、のサンプルシート

Posted at

HTML CSS JS のワンシート見本集

1.(3.)生年月日の入力(セレクター)

https://qiita.com/tattyan39/items/315371a4c2f348ace57b 一部訂正があります。
readSelectedValue("2020"); // hthl記述の表示書き出しの時、実行されます。(第二項目の選択)
function readSelectedValue(selectedValue) {
アバウト年選択・詳細年選択・月選択・前半日選択(後半日選択)のセレクターボックス

2.(1.)誕生日の曜日算出

通常その人でも忘れているキーワードに使えると思って。
この項目は、(3.)の上に設置されている必要があります。jsでは後から出てくるスコープが見えない事があるためです。
Number,string の入力型式に注意してください。

3.(2.)現行月のカレンダー

submit のネームとvalue でクリックすれば日の選択として、送ることが出来ます。
class で文字色などのスタイルも決められます。
選択月の表示はあなたの改造に任せます。

4.(4.)都道府県選択

23区とか、あなたの手腕に任せます。佐藤さんがふたりいても区が違えばと考案しました。
感嘆に増やせます。23_1_新宿,32_11_新新宿　など。

5.(5.)パスワード入力フォーム　仮想二重化(hidden)により直視を避ける。

普通のパスワード入力でも良いのだが、作った人しか分からないという、利点を狙いました。
ちなみに、送信ではもろに出ます。

全体

test5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Test Page</title>
<style>
body {
    font-family: Arial, sans-serif; /* フォントを設定 */
    background-color: #f0f0f0; /* 背景色を設定 */
}
.parent:active .child {
	display: block; /* 親がアクティブなときに子を表示("-"は演算命令なので命名しない事。) */
}
select option {
    margin: 3px; /* セレクターのオプションのマージンを設定 */
}
#isit_selector {
    display: block; /* セレクター年を表示 */
}
#selected-value-display {
	display: none; /* div 詳細年の表示を非表示にする */
}
#selected-value-display2 {
    display: none; /* セレクター 年の選択肢を非表示にする */
}
#textbox-container {
    display: none; /* div 同列テキストボックスを非表示にする */
}
#isit_selector2 {
	display: block; /* セレクター月を表示 */
}
#isit_selector3 {
    display: block; /* セレクター日を表示 */
}
#isit-selector_b1 {
    display: block; /* new table2 セレクター都道府県を表示 */
}
#isit-selector-containerb2 {
    display: block; /* div 都道府県の選択肢を表示にする */
}
#isit-selector_b2 {
    display: none; /* セレクター都道府県の選択肢を表示にする */
}
#isit-selector_b22 {
    display: block; /* span inner都道府県の選択肢を表示にする */
}
#able_3 {
    display: none; /* セレクトボックスがない場合のテキストボックスを非表示にする */
}
#table_3 {
    width: 700px; /* テーブルの幅を700pxに設定 */
    background-color: rgb(11, 225, 225);
    border-collapse: collapse; /* テーブルのセルを結合 */
}
#get_birthday-input {
    width: 200px; /* 誕生日の入力欄の幅を200pxに設定 */
}
#birthday-input {
    width: 200px; /* 誕生日の曜日の入力欄の幅を200pxに設定 */
}
.cal_calendar {
    width: 30px; /* カレンダーのボタンの幅を30pxに設定 */
    height: 20px; /* カレンダーのボタンの高さを25pxに設定 */
    cursor: pointer; /* カレンダーボタンにカーソルを合わせるとポインターに変更 */
}
/* 暫定ここまで*/
</style>
</head>
<body>
    <!-- https://qiita.com/tattyan39/items/315371a4c2f348ace57b 一部訂正があります。-->
    <h1 align="center">Test Page</h1>
    <p>このページはテスト用のHTMLファイルです。</p>
    <form id="isit_base" name="isit_0" method="get" action="./test3.html">
    <input type="hidden" name="isit_base" value="test3.html">
    <h2>誕生日の曜日を計算</h2>
    <p>以下のボタンをクリックすると、誕生日の曜日が計算されます。</p>
    <button type="button" onclick="aqqum_basuw(2025, 8, 1);">誕生日の曜日を計算</button>
    <p>誕生日の曜日を計算するためのボタンです。</p>
    <input type="text" id="get_birthday-input" value="送信完了。"><input type="text" id="birthday-input" value="no_aqqum"><br>
    <input type="submit" value="誕生日の曜日送信"></form>
    <p>誕生日の入力欄と計算結果を表示するためのテキストボックスです。</p>
<script>
function aqqum_basuw(year, month, day) {
    alert("aqqum_basuw関数が呼び出されました。");
    if (!year || !month || !day) {
        year = 2025; // デフォルトの年
        month = 8;   // デフォルトの月
        day = 6;     // デフォルトの日
    }
    var new_year0 = document.querySelector("#selected-value-display2").value; // 入力された誕生日を取得
    alert("年: " + new_year0);
    if (isNaN(new_year0)) {
        new_year = year;
    }else{
        new_year = Number(new_year0); // 入力された誕生日を取得
        if (new_year < 1940) {
            alert("1940年以前の年は選択できません。");
            new_year = year;
        }
    }
    var new_month0 = document.querySelector("#isit-selector2").value; // 月の選択肢から取得
    alert("選択された月の値: " + new_month0); // 月の選択肢の値をアラートで表示
        if (new_month0 == "jan") {
            new_month = 1;
        } else if (new_month0 == "feb") {
            new_month = 2;
        } else if (new_month0 == "mar") {
            new_month = 3;
        } else if (new_month0 == "apr") {
            new_month = 4;
        } else if (new_month0 == "may") {
            new_month = 5;
        } else if (new_month0 == "jun") {
            new_month = 6;
        } else if (new_month0 == "jul") {
            new_month = 7;
        } else if (new_month0 == "aug") {
            new_month = 8;
        } else if (new_month0 == "sep") {
            new_month = 9;
        } else if (new_month0 == "oct") {
            new_month = 10;
        } else if (new_month0 == "nov") {
            new_month = 11;
        } else if (new_month0 == "dec") {
            new_month = 12;
        }else {
            new_month = month; // デフォルトの月
        }
        // new_month = (new_month); // 月の選択肢から取得
    var selecteday = document.querySelector("#isit-selector3").value; // 日の選択肢から取得
    if (isNaN(selecteday)) {
        selecteday = day;
    } else {
        selecteday = Number(selecteday);
    } // 日の選択肢から取得
    var new_day = selecteday; // 変数からも取れる。change で得ている
    alert("選択された日の値: " + new_day); // 日の選択肢の値をアラートで表示
    if (isNaN(new_day)) {
        new_day = day; // デフォルトの日
    } else {
        new_day = Number(new_day); // 日の選択肢から取得
    }
    alert("誕生日: " + new_year + "-" + new_month + "-" + new_day); //ここに人間の確認があるんや間違ったってかまへんのや。
    var get_basw = getBirthdayWeekday(new_year, new_month, new_day); // 誕生日の曜日を計算する関数を呼び出す
    document.getElementById("get_birthday-input").value = new_year + "-" + new_month + "-" + new_day; // 誕生日を表示する
    document.getElementById("birthday-input").value = get_basw; // 曜日を表示する
    alert("成功しました。誕生日の曜日: " + get_basw); // 曜日をアラートで表示
}
    // 誕生日の曜日を計算する関数  
function getBirthdayWeekday(year, month, day) {
    alert("getBirthdayWeekday関数が呼び出されました。");
    if (!year || !month || !day) {
        var year = 2025;
        var month = 8;
        var day = 6;
    }
    // Dateオブジェクトを作成 (月は0から始まるので-1する)
    const jp_weekdays = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
    var birthday = new Date(year, month - 1, day);
    var birthday_weekday = jp_weekdays[birthday.getDay()];
    // 曜日を取得 (0:日曜日, 1:月曜日, ..., 6:土曜日)
    alert(year+'-'+month+'-'+day+'は' + birthday_weekday + '[' + birthday.getDay() + ']' + "です。");
    return birthday_weekday;
}

function karenda() {
    //alert("カレンダーの関数が呼び出されました。");
    // 現在の日付を取得
    const today = new Date();
    //console.log(today.toString());
    var first_day = new Date(today.getFullYear(),today.getMonth(), 1);
    var first_weekday = first_day.getDay();
    var arr = Array(42).fill(0);  // 全部ゼロで埋める
    var moonth_mxday = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 月ごとの日数
    if (today.getFullYear() % 4 == 0 && (today.getFullYear() % 100 != 0 || today.getFullYear() % 400 == 0)) {
        moonth_mxday[1] = 29; // 閏年の2月は29日
    }
    var days_c = 0; // 今日の日付
    const jp_weekdays = ["日", "月", "火", "水", "木", "金", "土"];

    const colors = ["#ff8888", "#e78b4aff", "#cccccc", "#ffffff"]; // 色の配列 moonth8samarcolor?
    var days_c = 0; // 今日の日付
    var days_bc = "style='background-color: " + colors[days_c] + ";'";
    for (var i = 0; i < 7; i++) {
        jp_weekdays[i] = "<th>" + jp_weekdays[i] + "</th>"; // 曜日を設定
    }
    for (var i = 0; i < 42; i++) {
        if(i % 7 == 0) {
            arr[i] = "<tr>"; // 7日ごとに新しい行を開始
        } else {
            arr[i] = ""; // 空のセル
        }
        if (i < first_weekday || i > first_weekday + 31) {
            arr[i] += "<td> </td>"; // 空白の日
            continue;
        }
        if (i < first_weekday + moonth_mxday[today.getMonth()]) {
            if(i % 7 == 0) {days_c = 0;}else{days_c = 2;}
            days_bc = "style='background-color: " + colors[days_c] + ";'"; // 色を設定            
            days_c = i - first_weekday + 1; // 日付を計算
            arr[i] += "<td><input type='submit' class='cal_calendar' name='cal_" + (days_c) + "' value='" + (days_c) + "' " + days_bc + "></td>";
        }
        else {
            arr[i] += "<td> </td>"; // 月の終わりを超えたら空白の日
        }
        if (i % 7 == 6) {
            arr[i] += "</tr>"; // 7日ごとに行を閉じる
        }
    }
    // カレンダーのHTMLを生成
    var calendarHtml = "<b><font size='5' color='blue'>　" + today.getFullYear() + "年 " + (today.getMonth() + 1) + "月</font></b><table>";
    calendarHtml += "<tr>" + jp_weekdays.join("") + "</tr>"; // 曜日を追加
    for (var i = 0; i < arr.length; i++) {
        calendarHtml += arr[i];
    }
    calendarHtml += "</table>";
    document.getElementById("calendar").innerHTML = calendarHtml;
}
</script>
<button type="button" onclick="karenda();">カレンダーを表示</button>
<div id="calendar"></div>
<h2>生年の選択</h2>
    <table>
    <tr><th width="150px">生年の選択</th>
    <th width="100px">生年の選択 2</th>
    <th width="100px">月の選択</th>
    <th width="100px">日の選択</th></tr>
    <tr><td>
        <select id="isit-selector" name="isit-selectorn" onchange="handleChange(event);">
            <optgroup label="生年の選択">
            <option value="1940">1940-1959年</option>
            <option value="1960">1960-1989年</option>
            <option value="1980">1980-1999年</option>
            <option value="2000">2000-2019年</option>
            <option value="2020">2020-20xx年</option>
            <option value="1900" selected>選択してください</option><!--1950年以前の選択肢を追加-->
            </optgroup>
        </select>
    </td><td>
        <div id="selected-value-display">
            <select id="selected-value-display2" name="selected-value-display2">
                <optgroup label="2020-20xx年"></optgroup>
            </select></div>
<script>
// JavaScriptで選択された値を取得する selected-value-display/selected-value-display2(no acton select js actyoychege new evenet作成)
readSelectedValue("2020"); // 初期値として2020年を設定  表示を出しておく場合 出さない場合  // readSelectedValue("2020");
function readSelectedValue(selectedValue) {
    var year_now = Number(new Date().getFullYear()); // 現在の年を取得
    var stato_year = 50; // 初期値を設定 ナンバー
    var selectedValue_year = Number(selectedValue); // "1990"などの値を取得
    var padded_year = selectedValue_year; // 選択された年を格納
    if (selectedValue_year < 1940){
        // alert("1940年以前の年は選択できません。");
        document.getElementById("textbox-container").style.display = "block"; // テキストボックスを表示する
        document.getElementById("selected-value-display").style.display = "none"; // セレクターを非表示にする
        return; // 処理を終了
    } else if (selectedValue_year >= 1940 && selectedValue_year < 2000) {
        stato_year = selectedValue_year - 1900; // 選択された値を変数に格納
    } else {
        stato_year = selectedValue_year - 2000; // 選択された値を変数に格納
    }
    document.getElementById("selected-value-display").style.display = "block"; // セレクターを非表示にする
    // 選択された値を表示する
    var my_display = "";
    my_display += '<select id="selected-value-display2" name="selected-value-display2">';
    my_display += '<optgroup label="' + selectedValue_year +'年の選択">';
    // var padded_year = String(stato_year).padStart(2, '0'); // "03"
    my_display += '<option value="' + padded_year + '" selected>' + padded_year + '年</option>';
    for (var i = 1; i <= 19; i++) {
        if (selectedValue_year + i >= year_now) {
            break;
        } // 選択された年が現在の年を超えないようにする
        //padded = String(stato_year+i).padStart(2, '0'); // "01", "02", ..., "19" ストリング
        padded_year = selectedValue_year + i; // 選択された年を計算
        my_display += '<option value="' + padded_year + '">' + padded_year + '年</option>';
    }    
    my_display += '</optgroup>';
    my_display += '</select>';
    document.getElementById("selected-value-display").innerHTML = my_display;
    document.getElementById("selected-value-display2").style.display = "block"; // セレクターを表示する
    // 選択された値を表示する
    // alert("選択された値: " + selectedValue_year + "年の選択肢が選ばれました。");//
}

</script>
    <div id="textbox-container">
        <input type="text" id="custom-year" name="custom-year" placeholder="1940年以前の年を入力">
        <button type="button" onclick="readSelectedValue();">選択</button>
    </div>
    </td><td>
    <select id="isit-selector2" name="isit-selectorn2"> <!-- 月の選択肢を生成 noevent new作成　必要ない-->
        <optgroup label="月の選択">
        <option value="jan">1月</option>
        <option value="feb">2月</option>
        <option value="mar">3月</option>
        <option value="apr">4月</option>
        <option value="may">5月</option>
        <option value="jun">6月</option>
        <option value="jul">7月</option>
        <option value="aug">8月</option>
        <option value="sep">9月</option>
        <option value="oct">10月</option>
        <option value="nov">11月</option>
        <option value="dec">12月</option>
        </optgroup>
    </select>
    </td><td>
    <select id="isit-selector3" name="isit-selectorn3" onchange="handleChange3(event);"> <!-- 日の選択肢を生成 noevent new作成　必要ない-->
        <optgroup label="日の選択">
        <option value="to_01" style="background-color: white;">前半15日</option>
        <option value="to_16" style="background-color: grey;">後半16日から</option>
            <script>
            // JavaScriptで日の選択肢を生成
            generateDays("to_01"); // ページオープンの初期設定
            function generateDays(selecteday_in) {
                var selecteday =selecteday_in; // 選択された日の値を 
                if (selecteday != "to_01" && selecteday != "to_16") {
                    return; // 選択された値が"to_01"または"to_16"でない場合は処理を終了
                }
                // document.getElementById('isit-selector3').style.display = 'none';
                var option_value = '<optgroup label="日の選択">';
                   // option_value +='<option value="to_16" style="background-color: grey;">後半16日から</option>'; // オプションの値を初期化
                var strt_to = 1; // 日の初期値
                var end_of =  15; // 前半15日までの選択肢を生成
                var bkcolor = "white"; // 背景色の初期値
                var dayValue = ""; // 日の値を格納する変数
                var dayValue_after = ""; // 日の値を格納する変数
                var new_day = ""; // 新しい日の値を格納する変数
                // 選択された日の値に応じて背景色と選択肢を設定
                if (selecteday == "to_01") {
                    option_value +='<option value="to_01" selected style="background-color: white;">前半15日から</option>';
                    option_value +='<option value="to_16" style="background-color: #aaaaaa;">後半16日から</option>';
                    strt_to = 1; // 前半15日
                    end_of =  15;
                } else if (selecteday == "to_16") {
                    option_value +='<option value="to_01" style="background-color: white;">前半15日から</option>';
                    option_value +='<option value="to_16" selected style="background-color: #aaaaaa;">後半16日から</option>';
                    bkcolor = "#aaaaaa"; // 背景色を変更
                    selecteday = "16"; // 選択された日の値を16に設定
                    strt_to = 16; // 前半15日
                    end_of =  31; // 後半16日から31日までの選択肢を生成                
                }else{
                   if (selecteday < "16") {
                        strt_to = 1; // 前半15日
                        end_of =  15; // 前半15日までの選択肢を生成
                    } else if (selecteday >= "16") {
                        strt_to = 16; // 後半16日から31日までの選択肢を生成
                        end_of =  31;
                    }
                    if (selecteday < "10") {
                        selecteday = "0" + selecteday; // 1桁の場合は0を追加
                    }
                }
                // alert("選択された値: " + selecteday + "が選ばれました。"); // 選択された値をアラートで表示
                for (var i = strt_to; i <= end_of; i++) { //内部的に1からとか?
                    if (i == 29 || i == 30) {
                        bkcolor = "#f9ea69ff"; // 29日の背景色を変更// 29日、30日、31日の背景色を変更
                    } else if (i == 31) {
                        bkcolor = "#e78b4aff"; // 31日の背景色を変更
                    }
                    new_day = i; // 新しい日の値を設定
                    if (new_day < 10) {
                        new_day = "0" + new_day; // 1桁の場合は0を追加
                    }
                    option_value +='<option value="' + i + '" style="background-color: ' + bkcolor + ';">' + new_day + '日</option>';
                }
                document.getElementById('isit-selector3').innerHTML = option_value; // セレクトボックスの内容を更新
                document.getElementById('isit-selector3').style.display = 'block'; // セレクトボックスを表示
            } 
            </script>
        </optgroup>
    </select>    
    </td></tr>
</table>
<script>
function handleChange(event) {
    var selected = event.target.value;
    if (selected == "1900"){
	    document.getElementById('textbox-container').style.display = 'block'; // を表示
	    document.getElementById('selected-value-display').style.display = 'none';
    } else if (selected != "1900"){
  	    document.getElementById('textbox-container').style.display = 'none'; // を非表示
	    readSelectedValue(selected); // 選択された値を表示する関数を呼び出す
    } else {
  	    document.getElementById('ftextbox-container').style.display = 'none'; // を非表示
	    document.getElementById('selected-value-display').style.display = 'none';
    }
    //console.log("選ばれた値:", selected);
}

function handleChange3(event) {
    var selected3 = event.target.value;
    //console.log("選ばれた値:", selected);
    generateDays(selected3);
}   
</script>
<br>
<h2>都道府県の選択</h2>
<table><tr><td width="130px">都道府県の選択</td><td width="150px">都道府県の選択肢</td></tr>
    <td width="130px">
        <select id="isit-selector_b1" name="isit-selectorn_b1" onchange="handleChange1(event);">
            <optgroup label="都道府県の選択">
             <option value="東京">首都 東京</option>
             </optgroup>
                <optgroup label="地域別の選択">
                <option value="北海道">北海道</option>
                <option value="東北">東北</option>
                <option value="関東">関東</option>       
                <option value="中部">中部</option>
                <option value="近畿">近畿</option>
                <option value="中国">中国</option>
                <option value="四国">四国</option>
                <option value="九州">九州など</option>
                <option value="noselct">その他</option>
            </optgroup>
            </select>
        </td><td width="100px">
        <div id="isit-selector-containerb2">
            <select id="isit-selector_b2" name="isit-selectorn_b2"><!-- 都道府県の選択肢を動的に生成 chege は要らない-->
                <optgroup label="都道府県の選択">                  
                    <span id="isit-selector_b22"></span>
                </optgroup>
            </select>
            <div id="able_3"><input type="text" name="text_country" value="本居住籍海外など記入"></div>
        </div>
<script>
    country_rist("東京");  //script に理解させないと配列が成り立たない?
function country_rist(country) {
    // alert("都道府県の選択が行われました。" + country);
    const kens1 = ["北海道", "中央", "東", "西", "南", "北", "北方領土", "その他"];
const kens2 = ["東北", "青森", "岩手", "秋田", "宮城", "山形", "福島"];
const kens3 = ["関東", "東京", "茨城", "栃木", "群馬", "埼玉", "千葉", "神奈川"];
const kens4 = ["東京", "中央", "東", "西", "南", "北", "石破邸", "その他"];
const kens5 = ["中部", "新潟", "富山", "石川", "福井", "山梨", "長野", "岐阜", "静岡", "愛知"];
const kens6 = ["近畿", "三重", "滋賀", "京都", "大阪", "兵庫", "奈良", "和歌山"];
const kens7 = ["中国", "鳥取", "島根", "岡山", "広島", "山口"];
const kens8 = ["四国", "徳島", "香川", "愛媛", "高知"];
const kens9 = ["九州", "福岡", "佐賀", "長崎", "熊本", "大分", "宮崎", "鹿児島", "沖縄"];
if (country == 1) {
    return kens1;
} else if (country == 2) {  
    return kens2;
} else if (country == 3) {
    return kens3;
} else if (country == 4) {
    return kens4;
} else if (country == 5) {
    return kens5;
} else if (country == 6) {
    return kens6;
} else if (country == 7) {
    return kens7;
} else if (country == 8) {
    return kens8;
} else if (country == 9) {
    return kens9;
} else {
    return "0";
}
}
ken_rist("東京"); // 初期値として東京を設定
 function ken_rist(selected_b1) {   // 最初の変更命令。
    document.getElementById("isit-selector_b2").style.display = "block"; // セレクトボックスを表示   
    var optionsHtml = '<option value="0" selected>選択してください</option>';
    if (selected_b1 == undefined || selected_b1 == null || selected_b1 == "") {       
        selected_b1 ="東京"; // デフォルト値を設定  
        return; // 選択肢がない場合は処理を終了    
    }
    optionsHtml = '<option value="' + selected_b1 + '" selected>' + selected_b1 + '</option>'; // 選択された値を初期値として設定
    //alert("選択された値: " + selected_b1 + "が選ばれました。"); // 選択された値をアラートで表示
    //document.getElementById("isit-selector_b22").innerHTML = ""; // セレクトボックスの内容をクリア
    var selected = selected_b1;
    var kens = [];
    if (selected == "北海道") {
        kens = country_rist(1);
    } else if (selected == "東北") {
        kens = country_rist(2);
    } else if (selected == "関東") {
        kens = country_rist(3);
    } else if (selected == "東京") {
        kens = country_rist(4);
    } else if (selected == "中部") {
        kens = country_rist(5);
    } else if (selected == "近畿") {
        kens = country_rist(6);
    } else if (selected == "中国") {
        kens = country_rist(7);
    } else if (selected == "四国") {
        kens = country_rist(8);
    } else if (selected == "九州") {
        kens = country_rist(9);
    } else if (selected == "noselct") {
        document.getElementById("isit-selector_b2").style.display = "none"; // セレクトボックスを非表示
        document.getElementById("able_3").style.display = "block"; // セレクトボックスを表示
        //document.getElementById("able_3").innerHTML = "<input type=\"text\" name=\"isit-selector_b2\" value=\"本居住籍海外など記入\">"; // 選択肢がない場合はテキストボックスを表示
        return; // 選択肢がない場合は処理を終了
    }else {
        return; // 選択肢がない場合は処理を終了
    }
    document.getElementById("isit-selector-containerb2").style.display = "block"; // セレクトボックスを表示
    //alert("都道府県の選択が行われました。" + kens); //入ってるのがみんな出るはず。
    
    for (var i = 1; i < kens.length; i++) {
        optionsHtml += '<option value="' + kens[i] + '">' + kens[i] + '</option>';
    }
    optionsHtml += "</select>";
    document.getElementById("isit-selector_b22").innerHTML = optionsHtml;
    document.getElementById("isit-selector_b2").style.display = "block"; // セレクトボックスを表示
    document.getElementById("able_3").style.display = "none"; // セレクトボックスを非表示
}
    function handleChange1(event) {
    var selected_b1 = event.target.value;
    //console.log("選ばれた値:", selected_b1);
    document.getElementById("isit-selector-containerb2").style.display = "block"; // セレクトボックスを表示
    ken_rist(selected_b1); // 選択された値に応じて都道府県のリストを更新する関数を呼び出す
}
</script>
    </td></tr>
</table><br>
<h2>ユーザー情報</h2>
<table id="table_3"><tr>
    <td>お名前(name)</td><td><input type="text" name="namen" id="name" maxlength="100">名前を入れてからパスワードの設定をしてください。</td></tr>
    <tr><td>パスワード(pwd0)</td><td><input type="text" name="pwd0n" id="pwd0" value="入力してください">
    <br><input type="hidden" name="pwdn" id="pwd" value=""></td></tr>
<script>
  const inputElement = document.getElementById('pwd0');

  inputElement.addEventListener('keydown', function(event) {
    // alert("keydownイベントが発生しました"+ event.key);
  if (event.key === 'Backspace') {
    console.log('Backspaceキーが押されました');
    // Backspace処理
    my_del_Function();
  } else if (event.key === 'Delete') {
    console.log('Deleteキーが押されました');
    // Delete処理
    my_del_Function();
  } else {
    console.log('他のキーが押されました');
    myFunction(event.key);
  }
});
    // マウスイベントのリスナーを追加_
const t_inbox = document.getElementById('pwd0');//ベース

t_inbox.addEventListener('mousedown', function() {
    console.log('マウスボタンが押されました');
    var get_text = document.getElementById('pwd0').value;
    var B_text = document.getElementById('pwd').value;    
    if (get_text == "入力してください") {
        get_text = ""; // 入力が空の場合は空文字にする
    }
    var N_name = document.getElementById('name').value;
    if (N_name != "") { // または 一致の時。
        get_text = B_text; // 名前が入力されている場合は、パスワードの値を表示
    }else {
        get_text = "入力してください"; // 名前が入力されていない場合はデフォルトのテキストを表示
        document.getElementById('pwd').value = ""; // パスワードの値を空にする
    }
    document.getElementById('pwd0').value = get_text; // 入力されたテキストを表示する関数を呼び出すmyFunction(get_text);
    console.log('現在のテキスト:', get_text);
});

t_inbox.addEventListener('mouseup', function() {
    console.log('マウスボタンが離されました');
    var get_text = document.getElementById('pwd').value;
    var l_text = get_text.length;
    if (l_text != 0) {
        get_text = "*".repeat(l_text); // 入力されたテキストの長さに応じてアスタリスクを表示
    } else {
        get_text = ""; // 入力が空の場合は空文字にする
    }
    document.getElementById('pwd0').value = get_text; // 入力されたテキストを表示する
    console.log('現在のテキスト:', get_text);

});
function my_del_Function() {
    var A_text = document.getElementById('pwd0').value;
    var l_text = A_text.length-1;
    var B_text = document.getElementById('pwd').value;
    if (A_text == "") {
        B_text = "";
        document.getElementById('pwd0').value = "入力してください"; // 入力が空の場合はデフォルトのテキストを表示
    } else {
        B_text = B_text.slice(0, l_text);
    }
    document.getElementById('pwd').value = B_text; 
}
function myFunction(text) {    //kye pless chengeではない。
    // 入力されたテキストを処理する関数
    console.log('入力されたテキスト:', text);
    var A_text = document.getElementById('pwd0').value; // 現在のテキストを取得
    A_text += text; // 入力されたテキストを追加
    document.getElementById('pwd0').value = A_text;
    A_text = document.getElementById('pwd0').value;
    var l_text = A_text.length;
    // alert("l_text: " + l_text);
    var last_moji = A_text.slice(l_text-1, l_text);
    if (last_moji == "*" || last_moji == " ") {
        last_moji = ""; // 最後の文字がアスタリスクまたは空白の場合は空文字にする   
    }
    // alert("last_moji: " + last_moji);
    var A_text = document.getElementById('pwd0').value; // 現在のテキストを取得
    A_text += last_moji; // 入力されたテキストを追加
    var l_text = A_text.length;
    if (l_text >= 8) {
       // text = text.slice(0, 8); // 最大8文字までに制限
    }
    var B_text = document.getElementById("pwd").value;
    B_text += last_moji; // 入力されたテキストを追加
    document.getElementById("pwd").value = B_text;
    document.getElementById("pwd0").value = B_text;
    // timer
        setTimeout(function() {
            var A_text = document.getElementById("pwd").value;
            var l_text = A_text.length;
            if (l_text != 0) {
                A_text = "*".repeat(l_text); // 入力されたテキストの長さに応じてアスタリスクを表示
            }
            document.getElementById('pwd0').value = A_text; // 入力されたテキストを表示する
            console.log('1.5秒後に実行されました');
        }, 1500); // 単位はミリ秒（ms）
        // ここに処理を書く
}
</script>
    <tr><td>エラーコード(err)</td>
    <td><input type="radio" name="err" class="err" value="" maxlength="4">err
    　<input type="radio" name="err_no" class="err" value="" checked>no err<br><b>Gattim!</b></td></tr>
</table><br>
<input type="submit" value="送信">
<br>
<br>
</body>
</html>

検査は重ねましたが、完全とは言い切れません。
ご使用には、理解とともに　あることを願います。
それでは。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?