Question

我有一个带有几个单选按钮的HTML表单。前几个是普通的无线电，但最后一个与文本框相关联。我想运行一些JavaScript验证，以警告用户选择“其他”而不使用文本框提供值。

下面链接了功能性HTML + JS，但HTML的粗略轮廓是：

<ul>
    <li>
        <input type="radio"/> foo
    </li>
    <li>
        <input type="radio"/> bar
    </li>
    <li>
        <input type="radio"/> other, please specify:
        <input type="text"/> <span class="error">please provide a value</span>
    </li>
</ul>

我有一些JavaScript可以在选中其他收音机时聚焦文本框，反之亦然。

问题

我无法确定要将哪些事件挂钩以使验证按照我的意愿运行。

我遇到问题的测试用例：

在此序列操作中永远不应显示警告：
1. 从选中的Foo收音机开始，文本框中没有文字。
2. 给焦点文字框（例如点击它）;自动检查其他收音机。
3. 选择Foo radio
执行第3步时，应首先显示警告：
1. 选择Foo电台开始，文本框中没有文字。
2. 给焦点文字框（例如点击它）;自动检查其他收音机。
3. 请勿在文本框中输入内容，并继续使用表单的其余部分（即将焦点放在其他内容上）。

我尝试过的事情

Validating on the text box's blur（或更改）事件。在案例1步骤3中警告闪烁。这是因为模糊发生在Foo无线电被选中之前。
验证ul的模糊事件：它没有。
On the text box's blur event, add a handler for document's mouseup event。在mouseup上，验证并删除处理程序。当第2步中的焦点丢失是通过单击其他位置引起的时，这种方法有效。当键盘失去焦点或从窗口跳开时，它不起作用。或者当多次鼠标点击时间重叠时。修复这些似乎会让事情变得过于复杂。
处理文本框的模糊，并使用setInterval调用验证。我找不到延迟的好价值;太短意味着慢速鼠标点击会导致闪烁，太长意味着验证似乎与导致模糊的操作无关。

Answer 1

使用 li 中的 onmouseout 事件来获取其他选项怎么样？使用该事件的问题是，当您有嵌套元素并向父元素添加 onmouseout 事件处理程序时，当鼠标指针悬停其子元素时，浏览器会触发 onmouseout 事件，但是有scripts来解决这类问题。

使用另一个“文本框项目验证单选按钮

问题

我尝试过的事情

1 个答案: