テキスト入力後、エンターを押すことで関数を実行するには

質問

formのtextエリアに値を入力し、その隣に配置したボタンでその値を利用した
関数を実行することはできます。しかし、誤ってtextエリアでエンターを押してしまうと、
入力値が消えて何かが実行されているようですが、何も起きません。

　参考書などを見て、onchangeかonBlurでも使えばよいのかと思い試してみましたが、だめです。

　textエリアでクリックすることで、その値を利用した関数を実行できる＝隣のボタンを
クリックすることと同様の動作を実現するにはどうしたらよいのでしょうか。

《サンプル》
<input type = "text" name="text">
<button onClick ="xxxx()"> 実行 </button>
　※上のtextのvalueを元に実行するのが下のボタンの"xxxx()"

回答No.3

chie65536 · ベストアンサー

＞CGIの部分がわかりません。このまま記述したら、xxxx.cgiへのリンクと見なされて、404エラーが出ます。
ですね。formのaction属性は「submitされた時に飛ぶ場所」を書くので、飛ぼうとした先が無ければ404エラーです。

＞xxxx.cgiを作る必要があるということですね？でも私にはそこが分かりません。CGIは全く勉強していませんので。
うむ～、本当は「仕様の上ではaction属性が無いformタグは挙動が保証されない」のだけど、たいていのブラウザは「保証は無いけどそれなりに動いちゃう」ので、次のように直せば動くかな？

<form onSubmit="return xxxx()">
<input type="text" name="text>
<input type="submit" value="実行">
<form>

繰り返すけど「たいていは動くだろうけど、全てのブラウザでうまく行く保証はない」ので注意。

お礼

再びの回答、ありがとうございました。

　思ったとおりの動作が実現しました。ただ、言われるような「問題点」があることはきちんと覚えておきます。

　大変助かりました。

回答No.2

chie65536

typeにtextを指定したinputでEnterキーを押すと、inputタグの外側にあるformタグのaction属性で指定したアクションが実行されます。

つまり<input type=submit value="OK">のボタンを押したのと同じ動作になります。

で、もし、formタグにaction属性が無い場合（action属性は「必須属性」なので、無いのは許されないんだけど）は「テキストエリアでEnterを押すと何も起きないで、入力値が消える」と言う事になります。

以下のように修正しましょう。

<form method="post" action="xxxx.cgi"><!-- xxxx.cgiはxxxx()関数を呼ぶCGI -->
<input type="text" name="text><!-- Enterを押すとxxxx.cgiが呼ばれる -->
<input type="submit" value="実行"><!-- クリックするとxxxx.cgiが呼ばれる。＜button onclick="xxxx()"＞実行＜/button＞の代わり -->
<form>

お礼

回答ありがとうございます。

　CGIの部分がわかりません。このまま記述したら、xxxx.cgiへのリンクと見なされて、404エラーが出ます。

　xxxx.cgiを作る必要があるということですね？でも私にはそこが分かりません。CGIは全く勉強していませんので。

回答No.1

noname#39970

onkeyup でenterを判別して関数を呼ぶ

お礼

指摘していただいたことを自分なりに勉強した結果、

function enterchk(){
　if(document.f1.answer.onkeyup.which == 10){xxxx();}

　という関数を作り、formタグに
<form name="f1" action = "enterchk()">

　と書けばよいのかと思いました。でもこれでは動きません。
どこが間違っているのでしょうか。