この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','MS ゴシック','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>
No.3ベストアンサー
- 回答日時:
こんばんは
すでに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', 'MS ゴシック',
'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>
No.2
- 回答日時:
優里さん
・・・・①入力中に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 …
ありがとうございます。
選択肢を質問文のようにする方法も教えていただきたいです。よろしくお願いいたします。
「ただし、この様な script では、」の部分の、「この様な」は、最後の3つのURLのもののことですか?
No.1
- 回答日時:
1. submit イベントを使いましょう
https://developer.mozilla.org/ja/docs/Web/API/HT …
2. HTMLSelectElement の仕様例を参考にしましょう
https://developer.mozilla.org/ja/docs/Web/API/HT …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない 7 2023/12/15 19:32
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS HTMLでstyleを指定するフォームの作り方 2 2023/12/22 19:33
- JavaScript HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない 2 2023/12/18 18:12
- PHP アマゾンのような評価の星を選択した情報を確認画面でも表示させたいです。 1 2023/10/02 10:52
- JavaScript コードレビューをお願いします。 3 2023/12/17 01:07
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
プログラミング言語の制作方法について
C言語・C++・C#
-
HTMLで画像をポップアップで表示するようにする方法
HTML・CSS
-
-
4
Colorboxがうまく設置できません
JavaScript
-
5
PHPでのパスワード制限のセキュリティはどうなのか
PHP
-
6
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
7
これの対応OSを教えて下さい。php-8.3.0-src.zip
PHP
-
8
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
9
終端記号、非終端記号とは
C言語・C++・C#
-
10
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
11
VisualStudio2022でC言語プログラムで全角文字を使用すると不明なエラーが表示される
C言語・C++・C#
-
12
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
13
[再掲]JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい
JavaScript
-
14
HTMLで作った時報アプリが動きません
JavaScript
-
15
デジタルブックを自分のウェブサイトに設置する方法を教えて
オープンソース
-
16
Javaって使いますか、もう古いですか?C++とどっちがいいですか?分析でC++使う授業ありましたけ
C言語・C++・C#
-
17
SFTPなどは使わないホームページやプログラムファイルの公開方法
PHP
-
18
HTMLのbody内に<style>~</style>定義は作法的にOKでしょうか?
HTML・CSS
-
19
ホームページの事でおしえてください
CGI
-
20
htmlの修正方法を教えていただきたいです。
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLとJavaScriptで作った表示...
-
TextBoxに半角数字以外を入れた...
-
テキストエリアに履歴を残したい
-
javascriptのちょっとした動作...
-
イベント発生順序
-
【Javascript】(テキストボッ...
-
perl cgi文字化け解消方法と[1...
-
Request.Form(key)の中身をクリ...
-
テキストボックスに入力した色...
-
タイマーについて教えて下さい!!
-
jQueryのdatepickerの日付が選...
-
ページ間で変数を保持したい
-
blurイベントについて
-
GetElementByIdがうまく取得で...
-
開いたサブウインドウから値を...
-
フォームの内容でリンク先URLの...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
テキストボックス入力を半角英...
-
【jQuery】input nameの文字列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLとJavaScriptで作った表示...
-
GetElementByIdがうまく取得で...
-
tabindexの取得
-
TextBoxに半角数字以外を入れた...
-
JavaScriptで作ったアプリが正...
-
プルダウンで選択された値を別...
-
HTMLファイル同士での値渡し
-
フォームの内容でリンク先URLの...
-
ページ間で変数を保持したい
-
テキストボックスに初期値で1...
-
javascriptのちょっとした動作...
-
入力するテキストエリアをボタ...
-
jQueryのdatepickerの日付が選...
-
JSPでonChangeを強制発行するに...
-
マイナスなら赤字で表示したい...
-
大文字か小文字かを判断する方法
-
VBscriptの配列変数をJavascrip...
-
一部Enter無効化の方法を教えて...
-
テキストエリアに履歴を残したい
-
フォーカスが外れた時の入力チ...
おすすめ情報