2

ウェブサイトを作っています。検索ボックスをクリックすると、本来のようにテキストが消えますが、クリックするとテキストが戻ってこないので、戻ってきてほしいです。これが私のスニペットです

<div class='search'>
<form method="get" id='search' action="http://www.google.com/search">
<input type="hidden" name="q" size="31" maxlength="255" value="Site Name:" />
<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onFocus="this.value=''" />
</div>

テキストボックスを拡大して色を変えるために、背後にたくさんのcssがあります。関連する場合に備えて、コードを次に示します。

#search input[type="text"] {
background: url(imgs/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2)   inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
outline: none;
}

#search input[type="text"]:focus {
background: url(imgs/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 175px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
outline: none;
}
div.search
{
position:fixed;
top:8px;
right:5px;
}

ボックスをクリックすると、ボックスが拡大し、Search...テキストが想定どおりに消えます。しかし、クリックするとテキストが戻らないので、戻してほしいです。それ、どうやったら出来るの？*補足: ウェブサイトが見栄えが悪い場合は申し訳ありません im 13

4

2 に答える 2

3

変化する：

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onFocus="this.value=''" />

為に：

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." onFocus="this.value=''" />

値をプレースホルダーに変更するだけです:)

于 2013-02-09T23:49:11.790 に答える
1

古いブラウザー (html5 をサポートしていないブラウザー) と互換性を持たせたい場合は、次のようにすることができます。

    function removePlaceholder(element)  {
        if (element.value == "Search...") {
            element.value = "";
        }
    }

    function replacePlaceholder(element)  {
        if (element.value == "") {
            element.value = "Search...";
        }
    }

次に、inputタグを次のように設定します。

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onBlur = "replacePlaceholder(this)" onFocus="removePlaceholder(this)" />

お役に立てれば！

于 2013-02-10T01:32:53.300 に答える