詳しい人求む！

コード内にテキストボックス入力内容を埋め込みたい。

締切済

質問者：クモハ410系
質問日時：2020/11/24 18:48
回答数：3件

サイトのコード内にテキストボックスに入力した文字が埋め込まれ、指定場所に表示されるようにしたい。
どのようなコードを使えばよいのでしょうか。
教えてください。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2020/11/25 08:47

こんにちは

方法はいろいろあると思いますので、以下一例です。
こんなのではいかがでしょか？

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
</head>
<body>

<p>
<input type="text" value=""
onkeyup="document.getElementById('hoge').textContent = this.value;"/>
</p>

<div>◇ 以下に入力を反映↓
<div id="hoge"></div>
</div>

</body>
</html>

- 0
- 件

通報する

No.2

回答者： gura_
回答日時：2020/11/24 23:31

クモハ410系さん

･････入力した文字が埋め込まれ、指定場所に表示･･･････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>
function input(){
let in1 = document.querySelector("#input1").value;
document.querySelector("#output1").innerText = "入力文字は: " + in1;
}
</script>
</head>
<body>
入力: <input type="text" id="input1" value="" onChange="input()">
<br><br><br>
<div id="output1">ここに表示</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： lv4u
回答日時：2020/11/24 19:02

Ｗｅｂサイトで表示する内容は、固定的なものならHTMLで表示できます。

でも、テキストボックスとかコンボボックスなどに入力した値や選択した値を使って、画面上に関連する値を表示したいとなれば、HTMLではできません。
こういった動的な処理は、JavaScriptを埋め込むことで可能となります。
ただ、そのままJavaScriptで記述すると面倒なので、実際には、jQueryを使って記述することも多いです。

なお、数年前、FireFoxやIEなどのブラウザ上で実行できる開発言語として、WebAssemblyが作られました。
この言語を使えば、複雑なゲームまでも作ることができます。
また、マイクロソフトのASP.NET Core BlazorでC#を使ってWebサイトを作る場合で、質問者さんのようなことを実現するとき、JavaScriptではなく、C#を使ってのコーディングが可能になっています。