如何在其文本字段中放置标签？答案

【问题标题】：How can I position a label inside its textfield?如何在其文本字段中放置标签？
【发布时间】：2009-07-21 02:05:44
【问题描述】：

我有许多在文本框中显示指令文本的文本字段（默认值的外观）。在焦点上，文本的颜色会变浅，但在输入文本之前不会消失。当文本被擦除时，标签会返回。它很光滑。 默认值不会削减它，因为这些会在焦点上消失。

我可以使用它，但是代码很复杂，因为它依赖于与文本字段的各个宽度相对应的负边距。我想要一个动态解决方案，其中其文本字段的标签自动正确定位，可能使用脚本。

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

谢谢。

迈克

编辑得更准确。

再次编辑以提供一些简单的代码来说明我所追求的效果：

<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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

第一个 - 使用 html5“占位符”属性。

2nd - 使用Modernizr.js 检测浏览器中对占位符的支持，并使用一个简单的 jQuery 脚本为不支持它的浏览器添加支持。

因此，html 将如下所示：

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

CSS：

.placeholder{color:#ccc;}

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

【讨论】：

【解决方案2】：

你在这里问的可能是所谓的文本框水印。

为此，您通常不会在文本字段中使用标签（控件）。相反，当文本字段的实际内容为空时，您使用某些 CSS 属性将文本字段的内容替换为一些文本，然后在模糊后将其删除（额外检查文本框本身内的文本是否相同作为水印文本。如果是，请再次空白该字段。）

试试this。使用 jquery 和 css 实现这一点非常简单。

【讨论】：

不要吹毛求疵，但我更喜欢将其称为提示横幅文本，而不是水印。根据定义，水印是持久的。另一方面，提示横幅文本会在您聚焦文本框时消失，而在您输入时会消失。并不是说它是一个很好的参考或任何东西，但 Win32 API 也将此功能称为提示横幅文本。我同意您可能不想在文本框中放置标签。但是，我也鄙视对此的 javascript 解决方案。如果文本框元素本身有一个属性来指示提示横幅文本，那就太好了。
也许他们会设法将其添加到标准中:)。 Namingwise 我从使用该特定术语的 ASP.NET AJAX 控件工具包中获取它。我在想类似的你可以使用一个纯 CSS 实现，使用 :hover 和背景图像，它不会是完美的，但可行。

【解决方案3】：

这是我从某个地方借来的：

$(function() {

    // Give the textbox a watermark
    swapValues = [];
    $('.your_input_class').each(function(i){
        $(this).val("Please enter xyz");
        swapValues[i] = $(this).val();
        $(this).focus(function(){
            if ($(this).val() == swapValues[i]) {
                $(this).val("").css("color", "#333");
            }
        }).blur(function(){
            if ($.trim($(this).val()) == "") {
                $(this).val(swapValues[i]).css("color", "#ccc");
            }
        });
    });

});

然后为你的输入框：

<input class="your_input_class" type="text" value="" />

它会记住页面加载时存储在其中的值（嗯，我直接在 JS 中设置我的值），它还会在聚焦/不聚焦时改变颜色。

【讨论】：

【解决方案4】：

你的意思是this？但不是“必需”，而是有标签？

我使用了一个 jQuery 解决方案，我将输入的值设置为“必需”。输入具有灰色类，因此默认文本较浅。

评论后编辑

您可以更改 keydown 和 keyup 上的输入值，而不是使用焦点。

$('.required_input').keydown(function()
{
    if (this.value == 'required')
    {
        $(this).val('').removeClass('gray');
    }
} );

$('.required_input').keyup(function()
{
    if (this.value == '')
    {
        $(this).val('required').addClass('gray');
    }
} );

$('.required_input').blur(function()
{
    if (this.value == '')
    {
        $(this).val('required').addClass('gray');
    }
} );

【讨论】：

它是否将文本字段的实际值设置为必需？它可能一直都是可以接受的。
我认为我不能使用默认值来获得我正在寻找的结果。我更新了帖子以更清晰。
您不需要删除焦点上的默认值。您可以等到 keydown 事件。我更改了代码以反映这一点。

【解决方案5】：

<script type="text/javascript">
    window.onload = function(){
        inputs = document.getElementsByTagName("input");
        for(i = 0; i < inputs.length;i++){
            var feild = inputs[i];
            if(feild.type == "text"){
                var label = document.getElementById(feild.id + "Label");
                label.style.left = "-" + feild.clientWidth;
            }
        }
    }
</script>

这段脚本应该做你想做的事

【讨论】：