如何在文本字段中放置标签?

时间:2009-07-21 02:05:44

标签: javascript html css

我有很多文本字段在文本框中显示指令文本(默认值的外观)。在焦点上,文本的颜色变浅,但在输入文本之前不会消失。删除文本时,标签返回。这很漂亮。 默认值不会削减它,因为这些会消失。

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

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

感谢。

麦克

编辑得更精确。

再次编辑,提供一些简单的代码,说明我的效果:

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

5 个答案:

答案 0 :(得分:3)

我会采取不同的方法(这不完全是我的想法,但我找不到信用来源):

1st - 使用html5“占位符”属性。

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

答案 1 :(得分:0)

你的意思是this吗?但不是“必需”,它会有标签吗?

我使用了jQuery解决方案,我将输入值设置为'required'。输入具有灰色类,因此默认文本较浅。


评论后编辑

您可以更改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');
    }
} );

答案 2 :(得分:0)

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

为此,您通常不在文本字段中使用标签(控件)。相反,当文本字段的真实内容为空时,使用某些CSS属性将某些文本替换为文本字段的内容,然后在模糊后将其删除(附加检查以查看文本框内部的文本是否相同)作为水印文本。如果是,则再次将该字段留空。)

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

答案 3 :(得分:0)

这是我从某个地方借来的一个:

$(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 :(得分:0)

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

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