我会采取不同的方法我的想法，但我找不到信用来源）：

第1 - 使用html5placeholder属性。

$ b b

2nd - 使用 Modernizr.js 来检测浏览器中是否支持占位符，以及一个简单的jQuery脚本

所以，html看起来像这样：

 < input type =textclass =placeholderplaceholder =Help Text/& 
< textarea class =placeholderplaceholder =其他帮助文本>< / textarea> 
 

css：

  .placeholder {color：#ccc;} 
 

  / *为不支持HTML5的浏览器设置占位符< input placeholder ='text'> 
 *取决于Modernizr v1.5 
 * / 
 if（！Modernizr.input.placeholder）{
 $（'input [placeholder]，textarea [placeholder]'）
 .focus（function（）{
 var input = $（this）; 
 if（input.val（）== input.attr（'placeholder'））{
 input .val（''）; 
 input.removeClass（'placeholder'）; 
} 
}）
 .blur（function（）{
 var input = $ （this）; 
 if（input.val（）==''）{
 input.addClass（'placeholder'）; 
 input.val（input.attr（'placeholder'） ）; 
} 

}）
 //在加载时运行一次
 .blur（）; 

 //清除提交时所有的占位符
 $（'input [placeholder]，textarea [placeholder]'）。 b $ b $（this）.find（'[placeholder]'）。each（function（）{
 var input = $（this）; 
 if（input.val（）== input。 attr（'placeholder'））{
 input.val（''）; 
} 
}）; 
}）; 
} 
 

I have many textfields that show instruction text within the textbox (how the default value would look). On focus the color of the text becomes lighter, but doesn't go away until text is entered. When text is erased, the label returns. It's pretty slick. A default value doesn't cut it, because these go away onfocus.

I have it working, but the code is complicated because it relies on negative margins that correspond to the individual widths of the textfields. I want a dynamic solution where the label for its textfield is positioned correctly automatically, probably using a script.

Any help would be greatly appreciated. But I am not looking for default values as a solution.

Thanks.

Mike

Edited to be more precise.

Edited again to provide some simple code that illustrates the effect I am after:

<input style="position: relative; width: 150px; font-size: 10px; font-family: Verdana, sans-serif; " type="text" name="name" id="name"
onfocus="javascript: document.getElementById('nameLabel').style.color='#BEBEBE';"
onkeypress="javascript: if (event.keyCode!=9) {document.getElementById('nameLabel').innerHTML='&nbsp;';}"
onkeyup="javascript: if (this.value=='') document.getElementById('nameLabel').innerHTML='Your&#160;Name';"
onblur="javascript: if (this.value=='') {document.getElementById('nameLabel').style.color='#7e7e7e'; document.getElementById('nameLabel').innerHTML='Your&#160;Name';}"/>
<label id="nameLabel" for="name" style="position: relative; margin-left: -150px; font-size: 10px; font-family: Verdana, sans-serif;">Your Name</label>

I would have taken a different approach (It's not entirely my idea, but i can't find the source for credit):

1st - Use html5 "placeholder" property.

2nd - Use Modernizr.js to detect support of placeholders in the browser and a simple jQuery script to add support to browsers that doesn't support it.

So, the html will look something like that:

<input type="text" class="placeholder" placeholder="Help Text" />
<textarea class="placeholder" placeholder="Another help text"></textarea>

The css:

.placeholder{color:#ccc;}

And the javascript:

/* Set placeholder for browsers that don't support HTML5 <input placeholder='text'>
 * Depends on Modernizr v1.5
 */
if (!Modernizr.input.placeholder){
    $('input[placeholder], textarea[placeholder]')
        .focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        })
        .blur(function() {
            var input = $(this);
            if (input.val() == '') {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }

        })
        //Run once on load
        .blur();

    // Clear all 'placeholders' on submit
    $('input[placeholder], textarea[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        });
    });
}