一度やったのだけど忘れてしまって、やり直してみました。
fileからtextareaに出すにはJavascriptを読み込み時に一度だけ読み込めば、objectが常駐して閉じるまでtextareaの選択リストを更新してくれます。
textareaをクリックして、実行ルーチンはこれとは関係ありません。
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="stylesheet" href="studio.css" type="text/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 -->
<div id="test_my0">test0</div>
<hr>
<b>form</b><br>
<form name="myfile">
<input type="file" id="selfile" accept=".txt" />
<div id="errmessage"></div>
<textarea name="texta" id="mytextr"></textarea>
</form>
<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
<hr>
<form name="my_form_0">
<input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
</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">text</p>
<div id="test_my1">test1</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のscript
// ver. 1_00(test)
/*
2024/03/14-03/21-
// it html
<div id="test_my0">test0</div>
<hr>
<b>form</b><br>
<form name="myfile">
<input type="file" id="selfile" accept=".txt" />
<div id="errmessage"></div>
<textarea name="texta" id="mytextr"></textarea>
</form>
<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
<hr>
<form name="my_form_0">
<input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
</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">text</p>
<div id="test_my1">test1</div>
//
*/
text_read(); //一回だけ実行してやれば常駐して消すまで有効に成る 毎回実行すると得られない。
//let this_file = "";
function text_read() {
alert('テキストリード')
var obj1 = document.getElementById("selfile");
obj1.addEventListener("change", function(evt) { //"change"
var file = evt.target.files;
var reader = new FileReader();
reader.readAsText(file[0]);
reader.onload = function(ev) {
document.myfile.texta.value = reader.result;
}
//エラー処理
reader.onerror = function(e) {
//エラーメッセージを配列に格納する
var errmes = new Array(
"",
"ファイルが見つかりません！",
"セキュリティエラーが検出されました！",
"ファイルの読込が中断されました！",
"ファイルの読み込み権限がありません！",
"ファイルサイズが大き過ぎます！"
);
//エラーをinnerHTMLで書き出す
var obj2 = document.getElementById("errmessage");
obj2.innerHTML = errmes[reader.error.code];
}
}, false);
}
// 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.my_form_0.elements[0].checked = false;
// Radio2が選択
}else{
document.my_form_0.elements[1].checked = false;
// Radio1が選択
}
}
// form end
// no coll
function read() {
alert("my_mese");
let redotext = document.querySelector('#mytextr').value;
alert(redotext);
// 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;
}
スタイルシート
@charset "UTF-8";
/* ver. 1_00(test) */
/* 2024/03/24- */
/* test */
#test_my0 {
color: red;
}
/*
#selfile {
width: auto;
height: auto;
}
.obje {
width: auto;
height: auto;
}
*/
#mytextr {
word-wrap: normal;
width: 400px;
height: 150px;
overflow: scroll;
/* valuetext :"test.txt"*/
/* border: 1px solid white;*/
background: #fff;
padding: 10px;
/* box-sizing: border-box;*/
word-break: break-all;
border-radius: 5px;
font-family: monospace;
font-size: 0.75rem;
margin-top: 10px;
}
#test_my1 {
color: red;
}
おわり。処理を書いたテキストを読み込ませ、自動実行させようと、text fileを読み込ませたかった、だけです。
参考にどうぞ。