2011-03-16 118 views
0

我目前难倒了我必须完成的实验。我需要创建一个在线网站,查找银币的价值(使用本地主机和xampp)。我坚持使用的实验部分是我必须检查用户离开时文本框中是否有值的地方。如果没有,我需要输出并提醒并将焦点设置回该文本框。我无法找到一种使用“this”使焦点工作的方法。我应该还可以提到有四个复选框,每个文本框都属于相应的复选框。如果用户离开它,将焦点设置为文本框

模糊功能是我无法使焦点工作的地方。

$(function() 
{ 

    $(":checkbox").click(function() 
    { 
     if($(this).attr("checked")) 
      $(this).parent().siblings().children().attr("disabled", false).focus(); 
     else 
      $(this).parent().siblings().children().attr("disabled", true).val(""); 
    }); 

    $(":text").blur(function() 
    { 
     if($(this).val() == "") 
     { 
      alert("Please enter a value"); 
      $(this).focus(); 
     } 
    }); 

    $("#btnEnter").click(function() 
    { 
     if($(":checkbox:checked").val()) 
      $("form").submit(); 
     else 
      alert("No coin types were selected"); 
    }); 
}); 
+1

你的代码工作完美me..http://jsfiddle.net/N6Zya/ – 2011-03-16 13:03:04

+1

我希望你意识到这是可怕的可用性? – 2011-03-16 13:39:58

+0

@TheSuperTramp:刚刚在FF3.6中测试过。我得到了警报,但我没有返回到文本字段。 – 2011-03-16 14:31:25

回答

0

我建议在您的HTML中添加一些ID或类,以使您的生活更轻松。它将使您的HTML,CSS和JS更容易区分复选框。另外,使用ID或Class访问Javascript中的DOM对象要比遍历整个DOM树上下并在整个过程中完全丢失要容易得多。

这样说的话,我会建议以类似的方式对复选框和文本框进行编号。例如:

checkbox id="silver1".....input type="text" id="silver1num" value="" 

这样

如果($( “#silver1”)检查& $( “#silver1num”)值== “”){

MsgBox......... 
    $("#silver1num").focus(); 

} 

你甚至可以遍历每个复选框,并减少一些代码。在每个复选框中添加一个“silvercoin”类。

$(".silvercoin").each(function(){ 
    if($(this).checked && $("#"+$(this).attr(id)+"number")).value == "") { 
     MsgBox...... 
     $(this).attr(id)+"number").focus(); 
    } 
}); 

注:$( “#” + $(本).attr(ID)+ “号”))从复选框拉ID - “silver1” 并追加 “数量” 它给你“#silver1number”这是id对应的输入框。

我只是从内存中输入了所有这些代码,所以我可能错误地输入了一两个东西,但概念是相同的。自从我玩jQuery以来已经过去了一两个月。

+0

这很好,但我需要这样做我的学校作业。我需要它基本上是完全一样的,但焦点部分为模糊功能工作。如果有帮助,我正在使用Firefox(版本?)。此外,我需要尽可能通用,所以我不需要多余的代码。 – Greener 2011-03-16 14:54:33

0

发现问题。我需要它将焦点重置到文本框,但是因为我点击其他内容时使用了复选框的单击事件。我需要做的就是延迟设定的时间,但这叫它忘记“this”指的是什么。然后解决方案是在循环外部创建一个变量来获取我所指的元素的ID。

$(":text").blur(function() 
{ 
    var ID = $(this).attr("id"); 

    if($(this).val() == "") 
    { 
     alert("Please enter a value"); 
     setTimeout(function() 
     { 
      $("#" + ID).focus(); 
     }, 50); 
    } 
});