如果输入了输入元素中的值,请使用jQuery检查

时间:2015-03-17 01:39:05

标签: jquery html5 css3 svg

首先,我检查了与我的问题类似的每个主题,不幸的是,我还没找到答案。我试图结合一些调味料,但我没有成功。 (注意:刚开始学习jQuery)

所以这是我的问题:

我创建了一个包含四个文本输入和一个按钮的表单。每个输入都有一个svg图标和一个占位符文本。

HTML:

<div class="first-field">
<input class="text" type="text" placeholder="Uw naam.." value="">
<svg class="unfilled" id="svg_user">
</svg>
</div>

(我删除了svg数据,因为它不相关。)

svg图标与占位符颜色相同。输入的文字颜色稍微浅一些。我想将svg图标的颜色更改为与输入文本相同的颜色,但仅在输入内容时。

首先,我尝试在输入内容时发出警报,以检查是否知道何时输入了内容。我使用了jQuery网站上的一个例子:

$( ".text" ).change(function() {
alert( "Handler for .change() called." );
});

这不起作用,因此对于文档来说,它应该是。

我在堆栈上找到了这个解决方案,但这也无法工作:

$(document).ready(function () {
$('.text').keyup(function () { alert('test'); });
});

如果没有警报,我无法继续构建解决方案。 快速摘要:

SVG图标需要更改为与输入文本相同的颜色,但仅在输入内容时。删除后,它应该更改回占位符文本的颜色。

现在,我感谢大家的帮助。

2 个答案:

答案 0 :(得分:0)

需要在document.ready包装器中包装代码的原因是因为代码想要在加载时立即运行。通常,代码在创建DOM之前运行(即页面已完全呈现) - 因此代码需要访问的某些元素尚未存在 - 代码中断。

以下是使用document.ready包装器的示例:

<强> HTML:

<div class="first-field">
    <input class="text" type="text" placeholder="Uw naam.." value="" />
    <svg class="unfilled" id="svg_user"></svg>
</div>

<强>的javascript / jQuery的:

var ran=0;
$(document).ready(function() {

    $('.text').keyup(function(e) { 
        if (ran == 0){
            ran++;
            alert('test');
        }
    });

}); //END document.ready

Working jsFiddle


但是,如果HTML是通过javascript或通过AJAX(通过.load())或类似的方式注入的,那么用户事件将不会触发任何代码运行。

在这种情况下,有一个简单的解决方案:使用jQuery&#39; .on()方法。

var ran=0;
$(document).ready(function() {

    $(document).on('keyup', '.text', function(e) { 
        if (ran == 0){
            ran++;
            alert('test');
        }
    });

}); //END document.ready

上述小变化:

$(document).on('keyup', '.text', function(e) { 

将事件处理程序绑定到文档本身,并告诉它监视涉及类keyup的元素的任何.text事件。

Modified jsFiddle

其中一个应该可以正常工作。


请注意,为您构建的示例包含CHECK,因此keyup操作不会执行多次。您可以删除它并让代码对每个按键执行某些操作:

$(document).ready(function() {

    $('.text').keyup(function(e) { 
        alert('test');
    });

}); //END document.ready

答案 1 :(得分:0)

我找到了解决问题的方法! 我发现jQuery无法处理普通的类#39;并且&#39; id&#39;。所以方法.addClass()和.removeClass()不会工作。

使用.attr()方法添加新的(默认)类的工作是什么。这是代码:

$(function(){
  $('.text').keyup(function(){
      if ($(this).val() == '') { //Check to see if there is any text entered
           //If there is no text within the input then add class 'unfilled'
            $("#svg_user").attr("class", "unfilled");
      } else {
           //If there is text in the input, then change the class from 'unfilled' to 'filled'
            $("#svg_user").attr("class", "unfilled filled");
      }
 });
});

Thnx为你帮助我开始了!