プロが教える店舗＆オフィスのセキュリティ対策術

JavaScriptで作ったアプリが正常に動作しない。改善したい。

解決済

  • 質問者：優里さん
  • 質問日時：
  • 回答数：3件

このHTMLは、フォームに入力されたテキストを表示ボタンを押すまたは入力中にEnterキーを押すことで文字がサイズ指定フォームに入力されているサイズで表示され、検索を押すと検索されるのですが、
①入力中にEnterを押しても表示されません。どうしてでしょうか。教えていただきたいです。
②検索エンジンの選択肢をあと3つ増やして、selectとoptionで選択できるようにしたいです。どのようにすればできるか教えていただきたいです。
この①②について教えていただきたいです。できれば、FullのHTML/JavaScriptも教えていただきたいです。よろしくお願いいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>検索機能付き入力文字サイズ指定表示</title>
<meta charset="UTF-8">
<script>
function displayText() {
var text = document.getElementById("text").value;
var size = document.getElementById("size").value;
document.getElementById("display").innerHTML = "<div style='font-size:" + size + "px'>" + text + "</div>";
}
function search() {
var query = document.getElementById("text").value;
var engine = document.querySelector('input[name="engine"]:checked').value;
if (engine == "bing") {
window.open("//www.bing.com/search?q=" + query);
} else if (engine == "google") {
window.open("//www.google.com/search?q=" + query);
}
}
document.getElementById("text").addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("button").click();
}
});
</script>
<style>
body{
font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
</style>
</head>
<body>
<form>
<label for="text">入力文字:</label>
<input type="text" id="text" name="text"><br>
<label for="size">文字サイズ(px):</label>
<input type="number" id="size" name="size" min="1" max="222" value="16"><br>
<label for="engine">検索エンジン:</label><!-- 「<select name="job"><option value="new">Bing」とか… -->
<input type="radio" id="bing" name="engine" value="bing" checked>
<label for="bing">Bing</label>
<input type="radio" id="google" name="engine" value="google">
<label for="google">Google</label><br>
<button type="button" onclick="displayText()">表示</button>
<button type="button" onclick="search()">検索</button>
</form>
<br>
<div id="display"></div>
</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (3件)

参考程度に

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんばんは



すでにNo1様が適切な回答をなさっていますけれど・・・

＞①入力中にEnterを押しても表示されません。どうしてでしょうか。
Enter入力で何を期待なさっているのか不明ですけれど、input要素でのEnterキー入力のデフォルト動作はformのsubmitです。（文書構成によってはsubmitされない場合もあるようですが・・）
スクリプトなどを実行するという機能はありません。
実行したいのであれば、そのような仕組みにしておく必要があります。

＞②検索エンジンの選択肢をあと3つ増やして、selectとoptionで選択
＞できるようにしたいです。
＞どのようにすればできるか教えていただきたいです。
ご提示の通り、select、optionタグを用いて作成すれば良いですけれど？

＞FullのHTML/JavaScriptも教えていただきたいです。
文章から、同様のものであれば何でも良いものと解釈しました。
※ テキスト、文字サイズの表示目的がさっぱりわかりませんけれど、
　 入力に連動して表示できれば良いものと解釈しました。
※ 「他の検索サイト」の仕様が不明ですが、クエリ部等はご例示のサイトと
　　同じ仕様であるものと仮定しました。
　（異なる場合は、それに応じた処理が必要になります）

以下、ご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'メイリオ', 'Meiryo', 'ＭＳ ゴシック',
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

#field {
width: 40em; max-width: 100%;
margin: 0 auto;
}
#field label span {
display:inline-block; width: 8.6em;
text-align-last: justify;
}
#field input[name="size"] { width: 3em; }
#field button { margin-left: 1.6em; }
</style>

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const
_$ = n => document.querySelector(`#field [name="${n}"]`),
E = { t: _$('text'), s: _$('size'), o: _$('display') },
SetTxt = e => {E.o.value = E.t.value },
SetSize = e => {
const s = E.s.value;
if(s != '' && E.s.checkValidity()) E.o.style.fontSize = s + 'px';
},
Open = e => {
const q = 'q=' + encodeURIComponent(E.t.value);
window.open('h' + `ttps://${_$('engine').value}?${q}`, '_blank');
};

E.t.addEventListener('keyup', SetTxt);
E.s.addEventListener('change', SetSize);
_$('search').addEventListener('click', Open);
});
</script>

</head>
<body>
<div id="field">
<p>
<label><span>入力文字:</span>
<input type="text" name="text"></label>
<p>
<label><span>文字サイズ(px):</span>
<input type="number" name="size" min="1" max="222" value="16">
</label>
<p>
<label><span>検索エンジン:</span>
<select name="engine">
<option value="www.bing.com/search">Bing</option>
<option value="www.google.com/search">Google</option>
<option value="fuga">fuga</option>
<option value="hoge">hoge</option>
<option value="piyo">piyo</option>
</select>
</label>
<button type="button" name="search">検索</button>
<hr>
<p><output name="display"></output>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
このHTMLとJavaScriptを参考に質問のを改造しようと思います。

通報する
お礼日時：2024/01/09 17:47

No.2

  • 回答者： gura_
  • 回答日時：

優里さん


　････①入力中にEnterを押しても表示されません。･･････

<input type="text" id="text" name="text"><br>
を、この様に変更します。↓
<input type="text" id="text" name="text" onchange="displayText()"><br>

ただし、この様な script では、残念ながらそれらの各検索ツールはうまく動きません。
こちらをご参考に↓
https://office-obata.com/report/memorandum/post- …
https://promo-search.yahoo.co.jp/tips/2014/012.h …
https://qiita.com/atomyah/items/ceeeba84bbd7dc64 …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
選択肢を質問文のようにする方法も教えていただきたいです。よろしくお願いいたします。
「ただし、この様な script では、」の部分の、「この様な」は、最後の3つのURLのもののことですか？

通報する
お礼日時：2024/01/07 14:28

No.1

  • 回答者： Ogre7077
  • 回答日時：

1. submit イベントを使いましょう


https://developer.mozilla.org/ja/docs/Web/API/HT …

2. HTMLSelectElement の仕様例を参考にしましょう
https://developer.mozilla.org/ja/docs/Web/API/HT …
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報