URL与File类型输入框互斥禁用功能实现问题排查

嘿，我来帮你排查下代码里的问题，然后给你一个靠谱的解决方案：

原代码的问题所在 #

• 事件选择不对：你用了keyup事件，但文件输入框（type="file"）的内容变化是不会触发keyup的——用户选择文件时，这个事件根本不会执行，自然没法禁用URL输入框。另外，URL输入框用keyup也有局限，比如用户用鼠标粘贴内容时，keyup不会触发，导致状态更新不及时。
• toggleClass逻辑缺陷：toggleClass是切换类的存在状态，比如当输入框有值时添加类，但如果用户把内容删除了，它会再次切换（移除类）吗？不对，你的判断是“如果有值就切换”，这会导致状态混乱——比如用户输入内容后添加了类，再删除内容时，因为val()为空，不会执行toggle，类就一直留在那里了。
• 仅用CSS禁用不够：pointer-events: none只是让元素没法点击，但表单提交时，这个输入框还是会被提交，而且浏览器自带的表单验证也不会忽略它，应该同时设置表单元素的disabled属性才是真正的禁用。

正确的实现方案 #

我们需要用更通用的input事件监听URL输入框的内容变化，用change事件监听文件输入框的选择操作，同时结合disabled属性和CSS样式来完成禁用效果：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="src_url" class="form-control" id="src_url" type="url">
<input name="src" id="src" accept=".pdf, .zip, .rar, .doc, .docx, .rtf" type="file">

<style>
.disabled-field {
  pointer-events: none;
  opacity: 0.5;
}
</style>

<script>
// 监听URL输入框的内容变化（输入、粘贴、删除等所有操作）
$("#src_url").on("input", function() {
  const hasValue = $(this).val().trim() !== "";
  // 设置文件输入框的禁用状态，并切换样式类
  $("#src").prop("disabled", hasValue).toggleClass("disabled-field", hasValue);
});

// 监听文件输入框的选择变化
$("#src").on("change", function() {
  const hasFile = $(this).files.length > 0;
  // 设置URL输入框的禁用状态，并切换样式类
  $("#src_url").prop("disabled", hasFile).toggleClass("disabled-field", hasFile);
});
</script>

代码说明 #

• input事件：针对URL输入框，它能捕获所有导致内容变化的操作（键盘输入、鼠标粘贴、右键粘贴等），比keyup更可靠。
• change事件：针对文件输入框，用户选择（或取消选择）文件时都会触发这个事件，通过files.length判断是否有选中的文件。
• prop("disabled", ...)：真正禁用表单元素，确保表单提交时不会包含该字段，同时浏览器的原生行为也会响应这个状态。
• toggleClass(类名, 条件)：第二个参数是布尔值，当条件为true时添加类，false时移除类，避免了原代码中状态混乱的问题。

内容的提问来源于stack exchange，提问作者Nurzhan Nogerbek