<input id="name" name="name" type="text" value="name" onblur="if(this.value == '') this.value='name';" onfocus="if(this.value == 'name') this.value='';" />
フォームにnameという文字列が表示されていてクリックすると文字列が消える。フォーカスを外すと再びnameが表示される。
それだけならば上記のコードで問題ないんですが、フォームに何も入力せず投稿ボタンを押すと、内容が「name」のまま投稿されてしまいます。
何か解決する良いアイデアはないでしょうか。
どうかよろしくお願いします。
No.3
- 回答日時:
onblur、onfocusでテキストボックスの中身そのものを変更するのではなく、
背景画像(「name」の文字のみの画像)を表示・非表示することによって
似たような効果を演出しているのを見たことがあります。
<input ~中略~ style="background-image:url(name.gif);" onblur="this.style.backgroundImage='url(name.gif)';" onfocus="this.style.backgroundImage='';" />
のような感じだと思います。(ファイル名は仮のものです)
ちなみにそのフォームがCGI等への送信であれば、CGI等のほうで、内容が「name」のままであればそれに対する処理をするというのもどうでしょう・・・
No.2ベストアンサー
- 回答日時:
こんにちは
<script type="text/javascript"><!--
function check() {
i = document.getElementById("name").value;
if(i == "name") return false;
}
//--></script>
<form action="***.cgi" method="post" onsubmit="return check()">
<input id="name" name="name" type="text" value="name" onblur="if(this.value == '') this.value='name';" onfocus="if(this.value == 'name') this.value='';"/>
<input type="submit" value="投稿">
</form>
とか
<script type="text/javascript"><!--
function check() {
i = document.getElementById("name").value;
if(i == "name") { alert("名前を入力して下さい"); }
else { document.getElementById("f").submit(); }
}
//--></script>
<form action="***.cgi" method="post" id="f">
<input id="name" name="name" type="text" value="name" onblur="if(this.value == '') this.value='name';" onfocus="if(this.value == 'name') this.value='';" />
<script type="text/javascript">
document.write("<input type='button' value='投稿' onclick='check()'>");
</script>
<noscript>
<input type="submit" value="投稿">
</noscript>
</form>
とか
<script type="text/javascript"><!--
function check() {
i = document.getElementById("name").value;
obj = document.getElementById("submit");
if(i != "name" && i != "") { obj.disabled = false; }
else { obj.disabled = true; }
}
//--></script>
<form action="***.cgi" method="post">
<input id="name" name="name" type="text" value="name" onblur="if(this.value == '') this.value='name';" onfocus="if(this.value == 'name') this.value='';" onkeyup="check()"/>
<script type="text/javascript">
document.write("<input type='submit' value='投稿' id='submit' disabled>");
</script>
<noscript>
<input type="submit" value="投稿">
</noscript>
</form>
とか?
※こういったチェックはjavascriptを使用してしかできない(知らないだけかもしれませんが)ので当然javascriptを切っていれば「name」のまま送信されることになります
No.1
- 回答日時:
フォームに何も入力せず投稿ボタンを押す送信を取りやめる場合は、
確認はしていませんが,
<head></head>の中に
------------------------------------------------------------
<script type="text/javascript">
<!--
function check(f) {
if (f.name.value=="name") {
return false;
}
}
//--></script>
------------------------------------------------------------
を挿入し、<form>タグにonsubmit属性を
<form method="post" onsubmit="return check(this)">
追加してみてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フォームに入力した文字列「○○○」...
-
INPUTのボタン周囲のスペース
-
ボタンを押さずにボタンを押す...
-
getParameterで値が取得できず...
-
submitボタンを横一列複数リン...
-
UWSC
-
formの送信ボタンをテキストに...
-
<div>部分のみの更新
-
戻ると、記入フォームの内容が...
-
リンクでPOSTデータを送信する...
-
どのボタンが押されたかの判定
-
ボタンをクリックした時に、入...
-
HTMLボタンの文字色を変え...
-
開くと同時に自動submit
-
ボタンリンクの文章を二行に・・・
-
c# 文字列の最後から1文字削除...
-
Webページ上のボタン等の位置を...
-
ASPで画面間のパラメタ受け渡し
-
asp.NET初心者です。「 ’Contex...
-
テキストボックスのクリックで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLボタンの文字色を変え...
-
submitボタンにvalue属性の値で...
-
checkboxとlabelがずれる
-
getParameterで値が取得できず...
-
リンクでPOSTデータを送信する...
-
SUBMITボタンを表示させないでS...
-
<FORM> </FORM> の中に さらに...
-
ボタンのなかに表示する文字を...
-
formでのtarget="_blank"2回目
-
INPUTのボタン周囲のスペース
-
戻ると、記入フォームの内容が...
-
チェックボックスの値をコピー
-
ボタンをクリックした時に、入...
-
HTML ラジオボタン nameの大文...
-
HTMLのKEYとVALUE...
-
HTMLでのid とnameの違い
-
formの送信ボタンをテキストに...
-
<form>中の<button>タグのv...
-
input button の文字の色を2色...
-
グーグルマップの文字化けで困...
おすすめ情報