1
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?

More than 1 year has passed since last update.

@tattyan3(tatsuji shimo)

Javascript 部品入力(text,file"未完",radio,フィールド)'html付き'

1
Posted at

報告出来る範囲内で。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<LINK rel="SHORTCUT ICON" href="img/name.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="たっちゃん,studio。">
<title>studio</title>
<link rel="studio_css" href="studio.css">
<style>
    body { 
        margin: 1cm;
        background:#ffbbff;
    }
</style>
<script>
if( screen.width/2 - 20 > window.innerWidth || screen.height/2 - 20 > window.innerHeight){
alert("ページが小さ過ぎます。");
}
</script>
<script src="studio.js" defer></script>
</head>
<body style="background-image : url(img/bgsc_1.png);">
<!-- stato studio -->


	<input type="text" name="text1" value="Please write the directory." id="my_text1" onchange="text_Changed(value)"><br>
	<input type="file" onchange="file_Changed(value)"><br>
	<!--<span id="my_inna_text">てきすと<span><br>-->
	<textarea name="txt" cols="40" rows="5" id="mytextarea"></textarea><br>
	<hr>
	<b>form</b><br>
    <form name="my_form_0">
		<input type="file" id="selfile" accept=".txt" onchange="text_read(value)">
		<span id="errmessage">errmessage</span><br>
		<input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
		<input type="file" onchange="fileChanged(value)"><br>
        <textarea name="txt" cols="40" rows="5" class="mytextr"></textarea>
    </form>
	<hr>	
	<span id="my_in_a_text" onclick="it_test2('test')">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
    <input type="button" value="テキストリード" onclick="read()"><br>
	<p id="mfl">x</p>
    <p id="f_name">filename</p><br>
    <div class="image-list">image-list</div>




<!-- end -->
<hr>
<div style="text-align: center;">
    <p>tattyan(<a href="https://tattyan0-0.sakura.ne.jp/" name="administrator" target="~_blank">たっちゃん</a>) by 2023/11/14- </p>
</div>
</body>
<!--<script src="my_js.js" defer></script>-->
</html>

Javascript

// ver. 1_00(test)

/*
 2024/03/14-
//   it html 
	<input type="text" name="text1" value="Please write the directory." id="my_text1" onchange="text_Changed(value)"><br>
	<input type="file" onchange="file_Changed(value)"><br>
	<!--<span id="my_inna_text">てきすと<span><br>-->
	<textarea name="txt" cols="40" rows="5" id="mytextarea"></textarea><br>
	<hr>
	<b>form</b><br>
    <form name="my_form_0">
		<input type="file" id="selfile" accept=".txt" onchange="text_read(value)">
		<span id="errmessage">errmessage</span><br>
		<input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
		<input type="file" onchange="fileChanged(value)"><br>
        <textarea name="txt" cols="40" rows="5" class="mytextr"></textarea>
    </form>
	<hr>	
	<span id="my_in_a_text" onclick="it_test2('test')">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
    <input type="button" value="テキストリード" onclick="read()"><br>
	<p id="mfl">x</p>
    <p id="f_name">filename</p><br>
    <div class="image-list">image-list</div>
// 
*/
let my_a_ll_line = "it syori!";
let element = document.getElementById('mytextarea');
element.value = 'Hello';
let fail_name = "";
let kore = "";
let kore0 = "";
let kore0_0 = "";
let my_text_value = "";
function text_Changed(my_text_value) {   //no_form
	alert("my_text_value:"+my_text_value);

}

function file_Changed(kore0_0) {   //no_form
	alert("kore0_0:"+kore0_0);
	// elements[0] 最初の一個だけの時はうまく行く時がある。
	fail_name = document.forms[0].elements[0].value;  
	alert("my_mese1:"+fail_name);
}

// Radio Button change
let int_r_no = 1;
let bol_boole = false; // false;
function radio_glope1(int_r_no,bol_boole){  //2,3エレメントRadio
	alert(bol_boole);
	alert(int_r_no);
	if(bol_boole == true && int_r_no == 2){
		document.forms[0].elements[1].checked = false;
		// Radio2が選択
	}else{
		document.forms[0].elements[2].checked = false;
		// Radio1が選択
	}
}

function text_read(kore) {    //1st
	alert("kore"+kore);
	fail_name = document.forms[0].elements[0].value;
	document.forms[0].elements[4].value = fail_name;
	alert("my_mese1"+fail_name);
	fail_name = fail_name.replace('C\:\\fakepath','\.');//なんか違ってる先頭にマッチさせる
	alert(fail_name);
	
	// ファイル名の選択
    var obj1 = document.getElementById("selfile");

    obj1.addEventListener("change", function(evt) {

        var file = evt.target.files;
	//	document.querySelector('#my_inna_text').innerHTML = file[0];
        var reader = new FileReader();

        reader.readAsText(file[0]);
		
		
		if('Filename' in file[0]){
			alert(file[0].Filename);
		}else{
			console.log('File name はありません'); //ハッシュ参照の仕方
		}
		
        reader.onload = function(ev) {
            //
        }

        //エラー処理   //セレクターレベルで処理されるので、判定基準を付けて別途Error処理した方がよい。
        reader.onerror = function(e) {
            //エラーメッセージを配列に格納する
            var errmes = new Array(
                "",
                "ファイルが見つかりません！",
                "セキュリティエラーが検出されました！",
                "ファイルの読込が中断されました！",
                "ファイルの読み込み権限がありません！",
                "ファイルサイズが大き過ぎます！"
            );
            //エラーをinnerHTMLで書き出す
            var obj2 = document.getElementById("errmessage");
            obj2.innerHTML = errmes[reader.error.code];
        }

    }, false);
}

function fileChanged(kore0) {    //2nd　+2
	document.querySelector('#my_in_a_text').innerHTML = my_a_ll_line;
	alert("kore0"+kore0);
	fail_name = document.my_form_0.elements[3].value;  
	alert("my_mese2"+fail_name);
		
    console.log(kore0);
	my_a_ll_line = " 読込.";
	if(1 == 0 && kore0.files.length > 0){
		for (let i = 0; i < kore0.files.length; i++) {
			my_a_ll_line += kore0.files[i];
		}
	}else{
		my_a_ll_line = "失敗";
	
	}
	document.querySelector('#my_in_a_text').innerHTML = my_a_ll_line;
}
let it_str = "";
function it_test2(it_str){
	alert("it chenge!!"+it_str);
	document.querySelector('#my_in_a_text').innerHTML = "chnge!";
}

// no coll
function read() {
	alert("my_mese"+fail_name);
    let redotext = document.querySelector('.mytextr').value;
    // document.querySelector('#mfl').innerHTML = redotext.replace(/\n/g, '<br>');
    let readlin = [];
    readlin[0] = '';
    let ii = 0;
	
    for (let i = 0; i < redotext.length; i++) {
        if (!redotext[i].includes('\n')) {
            readlin[ii] += redotext[i];
        } else {
            ii++;
            readlin[ii] = '';
        }
    }
    document.querySelector('#mfl').innerHTML = readlin;
}

一部動きません。

参考　js2

// note 

let it_str1 = "";
function it_test(it_str1){
	alert("it chenge!!"+it_str1);
	document.querySelector('#my_in_a_text').innerHTML = "chnge!";
}

空っぽのスタイルシート

@charset "UTF-8";
/* ver. 1_00(test) */
/* 2024/03/24- */

a {	background:  #ffffcc; }

おまけ
スクリーンショット 2024-03-15 215714.png

アイコンfileと背景は各自準備または、scriptの削除をお願いします。

各自、工夫してお使いください。

1
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
1
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?