0 
<form id="commentform" method="post" action="wp-comments-post.php">
    <input type="text" aria-required="true" tabindex="1" size="22" value="" 
       id="author" name="author">
</form>

入力ボックスにデフォルト値「visitor」を設定しました。フォーカスがテキストボックスにあるとき、またはマウスが入力したときに、「訪問者」文字列を非表示にし、フォーカスを失ったとき、またはマウスが移動したときに表示したいと考えています。

4

5 に答える 5

1

HTML5 プレースホルダー属性を使用してみてください。

<input type="text" aria-required="true" tabindex="1" size="22"
    placeholder="visitor" id="author" name="author">

ブラウザーのサポートはまだ 100% ではありませんが、これにより、不必要な手間をかけずに、達成しようとしているものを達成するための標準的な方法が得られます。

あなたが試すことができるもう1つのことは、入力要素をテキストの上に重ねて、フォーカスされていないときは透明/半透明にし、フォーカス/塗りつぶされているときは不透明にすることです。

現在、Tumblrのログイン ページでは次のトリックが使用されています。

<div class="input_wrapper" id="">
    <label for="user_password">Password</label>
    <input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>

CSS マジックにより、これは次のようになります。

ここに画像の説明を入力

于 2011-03-16T03:51:00.873 に答える
1

WordPress を使用しているようで、サイトに jQuery ライブラリがあります。

これを実現するには、私のjQuery プラグインを使用できます。

例

例

jQuery

$('#author').inputLabel({
   customLabel: 'Visitor'
});

この場合、自分でラベルを指定する必要がありましたが、プラグインは、アクセシビリティのために存在する必要がある に関連するlabel要素を見つけることで、これがなくても機能inputします。

jsFiddle .

于 2011-03-16T04:04:02.110 に答える
0

まだ HTML 5 に達している場合は、これを試してください。

<script type="text/javascript">
var prompt="visitor";       
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
            if(txt.value==''){
                txt.value=prompt;
            }
        }
</script>
于 2011-03-16T04:04:13.643 に答える
0

Ates Goralの答えは非常に興味深いようです。是非一発目でお試しください。これは、汗をかきたくない場合の代替手段です..:)
透かしプラグインの使用をお勧めします。たくさんあります。以前にこのプラグイン
を使用したことがあります。うまくいきました。あなたに良いコントロールを与えます。 プラグインには jQuery が必要です

于 2011-03-16T04:05:07.117 に答える
0

私も jQuery または CSS と疑似クラス (:focus) を使用しますが...

これは、まさにあなたが求めていることを行う簡単な JS ソリューションです。繰り返しますが、入力フィールドが 1 つまたは 2 つ以上の場合、このアプローチはお勧めしません。

<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>

于 2011-03-16T04:11:06.223 に答える