javascript - 使用 "other"文本框项验证单选按钮

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

1年前关闭。




Improve this question




我有一个带有几个单选按钮的 HTML 表单。前几个是普通 radio ，但最后一个与文本框相关联。我想运行一些 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>

当检查其他 radio 时，我有一些javascript将重点缩影文本框，反之亦然。

问题

我无法弄清楚要 Hook 哪些事件以使验证按我的意愿工作。

我遇到问题的测试用例:

在这一系列操作中，警告永远不应该出现:

从选定的 Foo radio 开始，文本框中没有文本。

给文本框焦点(例如单击它)；自动检查其他 radio 。

选择Foo电台

当我执行第 3 步时，应首先显示警告:

从选择 Foo radio 开始，并且文本框中没有文本。

给文本框焦点(例如单击它)；自动检查其他 radio 。

不要在文本框中输入内容，继续填写表格的其余部分(即关注其他内容)。

我尝试过的事情

Validating on the text box's blur (或改变)事件。警告在案例 1 步骤 3 中闪烁。这是因为模糊发生在 Foo radio 被选中之前。

验证 ul 的 blur 事件:它没有。

On the text box's blur event, add a handler for document's mouseup event .在 mouseup 上，验证并删除处理程序。当案例 2 第 3 步中的焦点丢失是由单击其他位置引起的时，此方法有效。当失去焦点是由键盘或远离窗口引起的时，它不起作用。或者当多次鼠标点击在时间上重叠时。修复这些似乎会使事情变得过于复杂。

处理文本框的模糊，并使用 setInterval调用验证。我找不到延迟的好值；太短意味着缓慢的鼠标点击会导致闪烁，太长意味着验证似乎与导致模糊的操作无关。

Answer 1

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