如何无需JavaScript实现两个HTML输入框同步并解决表单提交覆盖问题

针对你遇到的问题——两个同名输入框始终一显一隐，提交表单时空字段会覆盖已输入内容——这里有几个不用JavaScript的简便解决方案：

• 合并为单个输入框（最优方案）
  完全没必要保留两个输入框，只需要一个带name="message"的输入框，通过CSS媒体查询控制其容器的显示/隐藏，或者直接给输入框设置不同设备下的样式。这样DOM里始终只有一个有效输入框，彻底避免提交冲突。
  示例代码：

  <div class="message-input-container">
    <input type="text" name="message" placeholder="输入内容"/>
  </div>
  

  对应的CSS：

  /* 桌面端显示容器，设置输入框样式 */
  @media (min-width: 768px) {
    .message-input-container {
      display: block;
    }
    .message-input-container input {
      width: 400px;
      /* 其他桌面端样式 */
    }
  }
  
  /* 移动端显示容器，切换输入框样式 */
  @media (max-width: 767px) {
    .message-input-container {
      display: block;
    }
    .message-input-container input {
      width: 100%;
      /* 其他移动端样式 */
    }
  }
  

  如果确实需要两个结构差异极大的输入框，可以用媒体查询控制显示/隐藏，同时给默认隐藏的输入框加disabled属性——被禁用的输入框不会被表单提交。不过要注意：CSS无法修改disabled属性，所以需要提前给默认隐藏的输入框设置该属性，再通过媒体查询切换显示状态。

• 调整输入框DOM顺序
  浏览器提交表单时，同名输入框会按DOM先后顺序传递值，大部分后端框架会取最后一个值。把当前设备下显示的输入框放在DOM结构的后面，这样提交时已输入内容就会覆盖空字段。示例：

  <!-- 移动端输入框放在前面 -->
  <div class="hide_on_desktop">
    <input type="text" name="message"/>
  </div>
  
  <!-- 桌面端输入框放在后面 -->
  <div class="hide_on_mobile">
    <input type="text" name="message"/>
  </div>
  

  这个方法有局限性：如果后端逻辑是取第一个值或收集所有同名值，仍会出现问题，仅适合临时应急。

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