Question

JSP页面中有四个文本框。输入第一个文本框后，当我按 Tab 时，焦点移动到第二个文本框。同样，重复按 Tab 后，焦点将放在第3和第4个文本框上。

<input type="text" id="textbox1"/>
<input type="text" id="textbox2"/>
<input type="text" id="textbox3"/>
<input type="text" id="textbox4"/>

如果我从第一个文本框移动到第三个文本框而没有填写第二个文本框，那么我想要一个警告来“第二个文本框不能为空”。类似地，在第一个，第二个输入数据后如果我移动到第四个文本框而不填写第三个文本框，那么我想要一个警告“第三个文本框不能为空”。在警报之后，焦点必须再次放在该空文本框上，焦点不得进一步移动。我怎么能这样做？

Answer 1

你用jQuery标记了这个问题所以我会给你一个jQuery解决方案。您可能希望使选择器更具体一些，具体取决于您的HTML：

$("input").blur(function() {
    if(!this.value) {
        alert("Text box " + ($(this).index() + 1) + " cannot be empty.");
        this.focus(); //Keep focus on this input
    }
});

这将事件处理程序绑定到元素的blur事件（当字段失去焦点时触发，无论是通过按Tab键，单击其他位置还是任何其他更改焦点的方法）。事件处理程序检查字段是否有值，如果没有，则使用jQuery index方法警告消息，以获取元素相对于其兄弟的索引。

这是working example。

文本框保留为空时发出警报

1 个答案: