如何根据jquery中的条件对文本框进行更改事件

时间:2017-11-24 09:02:46

标签: jquery

我试图高亮显示一个文本框,如果它在里面点击,但它没有收到更改。

<input type="password"  id="txtPassword" name="txtPassword" placeholder="........" style="">

$(document).ready(function () {

            if ($('#txtPassword').click(function () {
                $("#txtPassword").css({ "background-color": "red" });
            }));


        });

它是一个非常简单的代码但是当我点击文本框时它应该改变它的颜色,但它没有改变。我没有使用onclick()方法,因为我需要用jquery.Any建议吗?

2 个答案:

答案 0 :(得分:0)

.click指定在该事件发生时触发的事件侦听器。你不应该把它包裹起来。 如果没有点击文本框,则该活动不会被激活。

从技术上讲,条件不应该破坏你的代码,它只是没有语义意义。在if(condition) { body }中,将始终对条件进行求值,以查看它是否产生真值,因此您的事件监听器将始终设置,并且将始终生成一个jQuery对象,因此您总是会到达if的正文。声明,你还没有包含任何内容。

单击文本框时,这足以将背景颜色设置为红色:

$('#txtPassword').click(function () {
   $("#txtPassword").css({ "background-color": "red" });
});

请注意,此事件仅在click上触发。如果您希望文本框在获得focus时变为红色,即通过标记到文本框中,则应在focus上设置颜色:

$('#txtPassword').focus(function () {
   $("#txtPassword").css({ "background-color": "red" });
});

...如果您对此感兴趣,请在blur重置。

当然,如果您只想根据焦点状态更改样式,您可以使用CSS中的:focus伪选择器来实现这一点:

#txtPassword:focus { background-color: red }

答案 1 :(得分:0)

这是您期望的解决方案:

  $("input.address_field").on('click', function(){  
     $(this).css('border', '2px solid red');
 });