基本的に質問の2つの部分。 Facebookのホームページのように（意味が示唆するように、グレーアウトすなわち）どのようなスタイルで（フォームのテキストボックスのテキスト領域に電子メールを書くように）形式でテキストボックス内の説明文を入れてフォームにテキストボックスの中に説明テキストを入れ、フィールドにフォーカスカーソルを入れる方法は？
上記の手順のいずれかでjavascriptの関与はありますか？はい、必要とされているものはやって
最初のトリックは、単に予め設定された値です。フィールドをクリックすると、チェックするonclick機能があります。値は "ここにあなたのメールアドレスを書いてください"ですか？その場合は、フィールドをクリアします。もし何もしないなら。
次に、フィールドが空であることを確認するonblur関数があります。もしそうなら、それに「ここにあなたのメールアドレスを書いてください」と書いてください。
第2のものもJavaScriptです。
Here is例ページ、これらの機能
<html>
<script type="text/javascript">
function searchBox()
{
elem = document.getElementById("search");
if(elem.value == "Search...")
{
elem.value = "";
}
}
function searchBoxBlur()
{
elem = document.getElementById("search");
if(elem.value == "")
{
elem.value = "Search...";
}
}
function init()
{
document.getElementById("other_box").focus();
}
window.onload = init;
</script>
<body>
<input type="text" name="other_box" id="other_box" />
<input type="text" name="search" id="search" value="Search..." onclick="searchBox()" onblur="searchBoxBlur()" />
</body>
</html>
の両方でこれが（jQueryのフレームワークを介して）はJavaScriptを必要とするであろう。以下はすぐにタイプアップされ、テストされなかった。多少の微妙な切れ目が必要な場合があります。ご質問がある場合 - エレメント希望:)
/* Run our work once the document is ready (loaded */
$(document).ready(function(){
/* Set initial state of field */
$("input.first-name").val("First Name").css("color", "#CCCCCC");
/* Attach logic to the .focus() event of our input field */
$("input.first-name").focus(function(){
/* What to do when this field is focused */
$(this).val("").css("color", "#333333");
}).blur(function(){
/* What to do when the field is blurred */
if ($(this).val() == "") {
/* Set value to 'First Name,' and set color to light gray */
$(this).val("First Name").css("color", "#CCCCCC");
}
});
/* Autofocus our field */
$("input.first-name").focus();
});
はこのjQueryですか？またはjavascript？ – OrangeRind
これはjQueryです。 –
jQueryフレームワーク経由のjavascriptです。 jQueryは基本的にjavascriptの操作を簡単にします。これにより、より多くのことをより迅速に行うことができます。 IE、FF、その他のブラウザがjavascriptを処理する方法の違いを解決する必要がありません。 – Sampson
あなたが考えるかもしれ非標準の属性があります。placeholder（サファリで作品私は推測）とは、。
placeholder in Javascriptautofocus（ちょうど火InputElement.focus()）と同様の操作を行うことができmyFieldでにカーソルを置くべきmyField.focus();
ときあなたが最後にそれを置く場合は、ページのロード（または$(document).ready() jQueryブロック）。私は、さまざまなブラウザでこれと一貫性のない動作を見たので、あなたの走行距離は異なる場合があります。限り、テキストフィールドの入力の色を設定すると、私はデフォルト値を持っており、ユーザーがそれにクリックしたときに別のCSSクラスを追加するには、それを設定します
：
そして、あなたのCSSう（再び、jQueryの）
.grayedInputField {
color: gray;
}
.activeInputField {
color: black;
}
、ユーザーがフィールドにクリックしたときには、Javascriptのようなので、テキストの色を変更するには、フィールドにクラスを追加している：のように見える
$(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});
、最初の迅速かつ汚い：
<input name="foo" value="Default text OMG!" onfocus="if(this.value == 'Default text OMG!') this.value = ''"/>
は、外部JavaScriptファイル内onfocusイベント機能がお勧めであることを作ります。それはもたらすであろう：
外部スクリプト：
function checkText(el,someText){ if(el.value == someText) el.value = ''}
ご入力：
<input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>
秒：あなたがしたい入力を与える "集中" IDと、このような何かを：
<input id="foo" name="foo" value="Default text OMG!"/>
スクリプト内：
window.onload = function(){ document.getElementById('foo').focus() }
+1、単純です。 – cgp
ya私はaltcognitoに同意します。 :) しかし、オラフールの答えはもっと包括的で、私が望むものに近いと判明しました。まだありがとう – OrangeRind
質問の最初の部分を行うJavaScript以外の方法はありません。 2番目の部分に関しては、JavaScriptを使って簡単に行うことができますが、それがなくても、ほとんどの最新のブラウザでは、最初の入力フィールドにフォーカスが追加されます。
function focus_function()
{
if (this.value=="Enter email here") {
this.value="";
this.class="actualEmail";
}
}
function blur_function()
{
if (this.value=="") {
this.value="Enter email here";
this.class="preset";
}
}
を次の2つのCSSクラス持つことができます：presetとactualEmailをし、指定ちょうどあなたのプリセット値に入力フィールドに値を設定するJavaScriptコード
異なる色など。
だけで、必要な入力フィールドにフォーカスを置きますonloadイベント機能があります：私はここで何が起こっているのかわからないんだけど、A）あなたは答えは実際には絶対的に確信している場合を除きdownvoteしていない
window.onload = function()
{
document.getElementById("email_field").focus();
}
を違う。人々はhttp://blog.stackoverflow.com/2009/03/the-value-of-downvoting-or-how-hacker-news-gets-it-wrong/ – cgp
を読む必要がありますya jQueryの男は彼の記事を削除しなければならなかったおそらくバッジを獲得する可能性があります。ダウン投票する必要はありませんでした。無知はdownvotingの最良の形態です。あなたが好きなものは投票し、残りは残しておいてください。 – OrangeRind