如果用户离开文本框，则将焦点设置到文本框

Question

我目前对必须完成的实验室感到困惑。我需要建立一个在线网站来查找银币的价值（使用 localhost 和 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");
    });
});

Answer 1

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

话虽如此，我建议以类似的方式识别复选框和文本框。例如：

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

这样

if( $("#silver1").checked & $("#silver1num").value=="") {

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

}

您甚至可以迭代每个复选框并减少更多代码。向每个复选框添加“silvercoin”类别。

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

注意： $( "#"+$(this).attr(id)+"number") ) 从复选框中提取 ID - “silver1”，并将“number”附加到它，为您提供“#silver1number”，即id对应的输入框。

我只是凭记忆输入了所有这些代码，所以我可能会输错一两件事，但概念是相同的。我已经有一两个月没有使用 jQuery 了。

Answer 2

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

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

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