0

以下のような入力ボックスがあります。

<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onclick = "this.className = 'focused'; javascript:Reset();" onblur = "javascript:Reset();" />

.focusedおよびform-textのcssは、

.focused {
color:black;
}

.form-text
{
    background-color: #FFF;
    color: #CCC;
}

ロード時の入力ボックスには、最初は灰色の「キーワードまたはフレーズを入力してください」という内容が含まれています。このボックスをクリックすると、タイプミスでフォントの色が黒に変わります（正常に機能します）。コンテンツを削除するときは、タブで次のフィールドに移動するか、マウスでコンテンツを押します。「キーワードまたはフレーズを入力してください」が黒に変わります。まだ灰色になっているはずです。cssにどのような変更を加える必要がありますか？任意の入力が役立ちます。ありがとう。

注：stackoverflowの「title」フィールドが希望どおりに機能することに気づきました。私は自分のbocが同じように機能することを望んでいます。

4

3 に答える 3

2

onclickの代わりにonfocusを使用します。また、onblurには、cssクラスを追加します。

jsFiddle： http: //jsfiddle.net/QybRX/14/

<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onfocus="this.value=''; this.className = 'focused'; javascript:Reset();" onblur = "basicSearch()" />
<input type="text"/>

<script>    
    function basicSearch()
    {
        var element = document.getElementById("basic-search");

        if ( element.value.length == 0 )
        {
            element.value = 'Enter keyword or phrase';
            element.className = 'form-text';
        }
        else
        {
            element.className = 'focused';
        }

        javascript:Reset();
    }
</script>
于 2012-04-30T14:02:18.407 に答える
0

何が起こっているのかというと、ユーザーが入力フィールドをクリックしたときに「focused」クラスを入力フィールドに追加しているのですが、そのクラスが削除されることはありません。次のように、クラスonblurを削除するか:focus、CSSでセレクターを使用するように切り替える必要があります。

.form-text
{
  background-color: #FFF;
  color: #CCC;
}

#basic-search:focus
{
  color: black;
}
于 2012-04-30T14:00:04.317 に答える
0

HTML5プレースホルダー属性を模倣しようとしていますか？もしそうなら、あなたはこの記事を見たいと思うかもしれません

于 2012-04-30T14:02:38.967 に答える