web-dev-qa-db-ja.com

HTML / CSS灰色で表示され、クリックして情報を入力すると消えるテキストを含むテキストボックスを作成する方法は？

グレーアウトされたコンテンツを含むテキストボックスを作成するにはどうすればよいですか？テキストをクリックしてテキストを入力すると、グレーアウトされた部分が消えて、目的のテキストを入力できますか？

例：

「名」テキストボックス。 「名」という単語はテキストボックス内にグレー表示されています。クリックすると、それらの単語が消えて名前が書き込まれます。

htmlcsstextbox
57
Ibn Ali al-Turki

この回答は、HTML5以前のアプローチを示しています。 placeholder属性を使用した最新のソリューションについては、 Psytronicの回答 をご覧ください。

HTML：

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

JavaScript：

function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}
51
Floern

Chrome、Firefox、IE10、およびSafariはhtml5プレースホルダー属性をサポートします

<input type="text" placeholder="First Name:" />

より多くのクロスブラウザソリューションを取得するには、JavaScriptを使用する必要があります。頭に浮かぶものはわかりませんが、既成のソリューションがたくさんあります。

http://www.w3schools.com/tags/att_input_placeholder.asp

114
Psytronic

HTML5では、<input name="first_name" placeholder="First Name">でネイティブにこれを行うことができます

ただし、これはすべてのブラウザでサポートされているわけではありません（IE）

これはうまくいくかもしれません：

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">

それ以外の場合、jQueryを使用している場合は、.focusと.cssを使用して色を変更できます。

12
David Houde

HTML5のみをターゲットにしている場合は、次を使用できます。

<input type="text" id="firstname" placeholder="First Name:" />

HTML5以外のブラウザーの場合、jQueryを使用してFloernの答えに基づいて構築し、JavaScriptを邪魔にならないようにします。また、クラスを使用してぼやけたプロパティを定義します。

$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($('#Comments'));

    $('#Comments').blur(function () {
        inputBlur(this);
    });
    $('#Comments').focus(function () {
        inputFocus(this);
    });

})

機能：

function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}

CSS：

.blurredDefaultText {
    color:#888 !important;
}
7
Jay1b

最短の方法は、変更する入力タイプに追加の属性として以下のコードを直接追加することです。

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"

注：要件に合わせて、「検索」というテキストを「移動」またはその他のテキストに変更してください。

4
Vivek Mhatre

これは動作します：

<input type="text" id="firstname" placeholder="First Name" />

注：プレースホルダー、ID、およびタイプの値を「email」または必要に応じて変更できます。

W3Schoolsの詳細： http://www.w3schools.com/tags/att_input_placeholder.asp

しかし、最良の解決策は、FloernとVivek Mhatreによるものです（j0kが編集）

以下にcode snippetがあります。これは典型的なWebページです。

.Submit {
    background-color: #008CBA;
    border: 3px;
    color: white;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
div {
  background-color: yellow;
  }
<div>
  <center>
  <p>Some functions may not work, such as the css ect.
  <p>First Name:<input type="text" id="firstname" placeholder="John" />
  <p>Surname:<input type="text" id="surname" placeholder="Doe" />
  <p>Email:<input type="email" id="email" placeholder="[email protected]" />
  <p>Password:<input type="email" id="email" placeholder="[email protected]" />
  <br /><button class="submit">Submit</button>                 </center>
</div>
4
PiggyPlex

これはあなたが理解するのを助けるための精巧なバージョンです

function setVolatileBehavior(elem, onColor, offColor, promptText){
elem.addEventListener("change", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("blur", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("focus", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.value=promptText;
elem.style.color=offColor;
}

次のように使用します。

setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name');
1
UltraInstinct

Floernのソリューションを使用できます。色をグレーに設定している間は、入力を無効にすることもできます。 http://www.w3schools.com/tags/att_input_disabled.asp

0
stoneMonkey77