Question

我对jQuery比较陌生。我错过了什么？

$(document).ready(function(){
  $('input[type=text]').focus(
    function(){
      $(this).toggleClass('blacktxt');
    });

    $('input[type=text]').blur(
    function(){
      $(this).toggleClass('graytxt');
    });
  });
});

Answer 1

你关闭额外的一个大括号

$(document).ready(function(){

  $('input[type=text]').focus(
    function(){
      $(this).toggleClass('blacktxt');
    });   // focus Closed

    $('input[type=text]').blur(
    function(){
      $(this).toggleClass('graytxt');
    }); // blur closed

  });  // document ready closed

Answer 2

您也可以使用纯CSS执行类似的操作：

Demo

HTML

<input type='text' value='text...'/>

CSS

input:focus{
    color:red;
}
input{
    color:grey;
}

Answer 3

我认为你有一个额外的封闭});会破坏页面。

如果你检查控制台，你会看到：

未捕获的SyntaxError：意外的令牌}

代码：

$(document).ready(function(){
  $('input[type=text]').focus(
    function(){
      $(this).toggleClass('blacktxt');
    });

    $('input[type=text]').blur(
    function(){
      $(this).toggleClass('graytxt');
    });
  });
}); // <-- remove this line

通过删除它将正常工作。

演示：http://jsfiddle.net/IrvinDominin/kGWF9/

Answer 4

<强> DEMO

<强> HTML

<input type="text" value="text">

<强> CSS

input[type="text"] {
    border:1px solid #333333;
    color: #000000;
}
input[type="text"].edit {
    border:1px solid #ff0000;
    color:#666666;
}

<强>的jQuery

$(document).ready(function () {
    var Input = $('input[type=text]');
    var default_value = Input.val();

    $(Input).focus(function () {
        if ($(this).val() == default_value) {
            $(this).val("");
            $("input").addClass("edit");
        }
    }).blur(function () {
        $("input.edit").removeClass("edit");
        if ($(this).val().length == 0) {
            $(this).val(default_value);
            $("input.edit").removeClass("edit");
        }
    });
})

jQuery清晰输入＆amp;换颜色

4 个答案:

Demo