检查输入类型文本何时填充答案

【问题标题】：Check when input type text is filled检查输入类型文本何时填充
【发布时间】：2011-11-02 08:28:06
【问题描述】：

我有一个输入类型为文本的表单。像这样：

<input type="text" placeholder="Voornaam" class="required" title="Voornaam" id="ctl00_ContentPlaceHolder1_tbFirstName" maxlength="255" value="Mike" name="ctl00$ContentPlaceHolder1$tbFirstName">

但是现在我的问题。通常，文本字段中的文本是灰色的。但是当你完成了一个领域。颜色必须是黑色。我如何用javascript检查这个？

谢谢

【问题讨论】：

您能否阐明“已完成”要求的含义？如果该文本框的值仅包含一个字符，是否认为该文本框已完成？

标签： javascript jquery forms css

【解决方案1】：

我认为您的意思是我们仅在用户完成编写时才需要颜色字段.... 如果是，那么您需要使用此算法：

$('#ctl00_ContentPlaceHolder1_tbFirstName').blur(function () {
    var self = $(this);
    if (self.val() != "") {
        self.css('color','black'); // Set black fore color
    }
    else {
        self.css('color','gray'); // Restore code
    }
});

【讨论】：

【解决方案2】：

您可以使用 jquery 中的.change 函数在用户键入内容并且光标移出文本字段时将颜色更改为黑色。

例如：

$("input[type='text']").change(function(){

    $(this).css('color', 'black');
});

【讨论】：

正确，但我认为 OP 的意思是“仅当字段具有值时才更改颜色”，因此您需要添加 if (this.value.length > 0) 并在 else 部分将颜色更改回灰色。

【解决方案3】：

<input type="text" onblur="changeColor()" placeholder="Voornaam" 
 class="required" title="Voornaam" id="ctl00_ContentPlaceHolder1_tbFirstName" 
 maxlength="255" value="Mike" name="ctl00$ContentPlaceHolder1$tbFirstName">

定义你的 changeColor() 函数，它将改变文本框中文本的颜色。

【讨论】：

【解决方案4】：

如果您离开输入字段（模糊），则会触发更改事件。如果您想进行即时检查，请使用 keyup 事件：

$('#ctl00_ContentPlaceHolder1_tbFirstName').bind('keyup', function(){
  if (someconditionistrue) $(this).css('color','black');
});

使用ID选择器比使用属性选择器快

【讨论】：

【解决方案5】：

这会将这条规则应用于所有具有所需类的元素。

$('.required').blur(function () {
    if ($(this).val().trim().length == 0) 
        $(this).css('color','black');
    else 
        $(this).css('color','gray');
  });

【讨论】：