如何在其文本字段中放置标签？ [英] How can I position a label inside its textfield?

问题描述

我有很多文本框显示文本框中的指令文本（默认值是什么样子）。在焦点上，文本的颜色变得更亮，但在输入文本之前不会消失。当文本被擦除时，标签返回。它很漂亮。 默认值不会削减它，因为这些都离开了onfocus。

我有它的工作，但代码是复杂的，在对应于文本字段的各个宽度的负边距上。我想要一个动态解决方案，其中的文本字段的标签自动正确定位，可能使用脚本。

任何帮助将非常感谢。但我不是在寻找默认值作为解决方案。

谢谢。

Mike

$

再次编辑以提供一些简单的代码，说明我之后的效果：

 < input style =position：relative; width：150px; font-size：10px; font-family：Verdana，sans-serif; type =textname =nameid =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 =' &＃160; Name';}/> 
< label id =nameLabelfor =namestyle =position：relative; margin-left：-150px; font-size：10px; font-family：Verdana，sans-serif;>您的姓名< / label> 
  

解决方案

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

第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('');
            }
        });
    });
}

这篇关于如何在其文本字段中放置标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！